Adakah pemilih nama kelas baharu kepada CSS3?

Pemilih nama kelas bukan perkara baharu bagi css3 Pemilih nama kelas digunakan untuk memilih elemen dengan kelas yang ditentukan Sintaksnya ialah ".class{css code;}"; telah digunakan sebelum ini, dan ia bukan perkara baharu kepada CSS3 Pemilih baharu dalam CSS3 termasuk pemilih atribut, pemilih kelas pseudo struktur, dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Pemilih nama kelas

Pemilih kelas

Gunakan atribut kelas untuk memanggil kelas kelas

Contoh:

 <p class="one">类选择器</p>

 .one {
       color: yellow;
        }

Nama kelas tag p di sini dipanggil satu, yang digunakan apabila css menambah gaya padanya (nama kelasnya) memilihnya.

Pengetahuan lanjutan: css3 pemilih baharu

Pemilih atribut

• input[value] { }(input and With value attribute )

• input[type=text] {} {Nilai atribut input ialah teks dan perlu ditukar}

• div[ class^=icon] { } (Pilih elemen yang merupakan div pertama dan kemudian mempunyai atribut kelas dan nilai atribut mesti bermula dengan ikon)

• bahagian[class$=data] {} ( Pilih Nama kelas berakhir dengan data)

Pemilih kelas pseudo struktur

• ul li:anak pertama { } (pilih anak pertama dalam ul A child li)

• ul li:last-child { } (pilih anak terakhir li in ul)

• ul li: nth-child(2) { } (Pilih anak kedua li in ul)

• ul li:nth-child(6) { } (Pilih anak kedua dalam ul Anak keenam adalah kecil li)

• ul li:nth-child(genap/2n) { } (pilih semua kanak-kanak genap)

• ul li:nth-child(ganjil/2n 1) { } (Pilih semua kanak-kanak bernombor ganjil)

• ol li:nth-child(n ) { } (Mula dari 0 dan tambah 1 setiap kali mengira ke belakang mestilah n. Pilih semua anak

• ul li:nth-child(n 5) { } (Pilih bermula daripada anak kelima. )

• ul li:nth-child(-n 5) { } (Pilih bermula daripada anak kelima dan mengira ke hadapan)

• ul li:jenis pertama { } (anak pertama)

• ul li:jenis terakhir { } (anak terakhir)

• ul li:nth-of-type(even) { } (even children)

• section div:nth-child( 1) { } (nth-child will mengatur semua kotak dengan nombor siri Apabila melaksanakan, mula-mula lihat: nth-child(1) dan kemudian kembali dan lihat div sebelumnya)

• section div:nth -of-type( 1) { } (nth-of-type akan menyusun kotak elemen yang ditentukan mengikut nombor siri; apabila melaksanakan, mula-mula lihat elemen yang ditentukan oleh div dan kemudian kembali untuk melihat: nth-of-type(1) anak mana )

Pemilih unsur pseudo (tidak ditemui pada halaman, selalunya digunakan untuk label fon) [Sama seperti pemilih label, berat ialah 1]

• ::sebelum memasukkan kandungan di hadapan elemen (di hadapan bahagian dalam kotak induk)

• ::selepas memasukkan kandungan selepas elemen (di hadapan bahagian dalam kotak induk)

• mesti mempunyai atribut kandungan

• div::selepas { kandungan: 'Saya';}

• .tudou:hover::before { } (Apabila tetikus kita melepasi kotak kentang, lapisan topeng sebelum di dalam dipaparkan)

• Unsur pseudo terapung jelas

(Belajar perkongsian video: tutorial video css, tutorial video html)

Atas ialah kandungan terperinci Adakah pemilih nama kelas baharu kepada CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!