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

WBOY
Lepaskan: 2016-05-16 15:49:08
asal
1947 orang telah melayarinya

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

2
Kelas pseudo negatif
:bukan(p ){color:red}
kecuali< Semua elemen selain daripada elemen ;p>
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan