Pengenalan kepada pemilih CSS baharu dan kelas pseudo dalam kemahiran tutorial HTML5_html5

Pemilih
p[name^="my"]{font-size:14px}
Selector^= menggunakan peraturan untuk semua

tag elemen
yang atribut namanya bermula dengan "my" p[ name$="my"]{font-size:14px}
Selector$= menggunakan peraturan kepada semua

tag elemen yang nama atributnya berakhir dengan "my"
p[name*= "my" ]{font-size:14px}
Selector$= menggunakan peraturan kepada semua

elemen yang nama atributnya mengandungi "my" di hujung
Selector> , ,~
Selector > menunjukkan bahawa elemen terjejas ialah anak kepada elemen pertama.
Pemilih Pemilih ini merujuk kepada elemen serta-merta mengikut elemen Kedua-dua elemen mesti mempunyai induk yang sama.
Pemilih~ adalah serupa dengan , tetapi elemen yang terjejas tidak semestinya mengikut elemen pertama.

Tambah ":" antara nama kelas pseudo dan elemen yang dirujuk
Contoh: myclass:nth-child(2)
Elemen kedua dalam elemen myclass
Kata kunci " ganjil " , "genap"
myclass:nth-child(odd): mempengaruhi
yang kedudukan indeks elemen induknya ialah nombor ganjil
myclass:nth-child(even): mempengaruhi
yang induknya kedudukan indeks elemen ialah nombor genap

Salin kod

Kodnya adalah seperti berikut:

.test:nth- child(ganjil)
{
warna:Biru;
}
.test:nth-child(genap)
{
warna: Merah ;
}
ujian:nth-child(2)
{
warna: Hijau
}
">
1

2

🎜>

1

🎜>

1

🎜>

Kesan Seperti berikut:
1
2
1
2
1