Di CSS 3, misalkan Anda membuat file HTML yang berisi struktur tag berikut:
<div id="nav-utama"></div>
<div id="konten-utama"></div>
<div id="konten-sekunder"></div>
<div id="konten-tersier"></div>
<div id="nav-sekunder"></div>
Kemudian, di file CSS
div[id^="nav"] { latar belakang:#ff0 }
Perhatikan " ^ "
CSS akan mengontrol [u]div#nav-primary dan div#nav-secondary[/u] dalam kasus ini. Harap dicatat bahwa kedua label ini diawali dengan nav , tidak jelas apakah dipisahkan dengan "-" atau apakah ID-nya cocok dari depan ke belakang [keringat]
div[id$="utama"] { latar belakang:#ff0 }
Perhatikan bahwa itu adalah " $ "
CSS akan mengontrol [u]div#nav-primary dan div#content-primary[/u] dalam kasus ini. Harap dicatat bahwa ada primar setelah dua tag ini. Tidak jelas apakah "-" digunakan sebagai pemisah, atau apakah ID cocok dari belakang ke depan [keringat]
div[id*="konten"] { latar belakang:#ff0 }
Perhatikan bahwa itu adalah " * "
CSS dalam hal ini akan mengontrol [u]div#content-primary div#content-secondary dan div#tertiary-content[/u]. Harap dicatat bahwa semua tag ini berisi konten . Tidak jelas apakah mereka dipisahkan dengan "-" atau apakah ID secara otomatis dipindai dan dicocokkan [keringat]
Sepertinya penulis mengatakan bahwa tag ini sekarang didukung oleh versi terbaru dari berbagai browser kecuali IE. Anda bisa mencobanya, tapi saya tidak akan mencobanya~ [lol]
div#content-primary:target { garis besar:1px padat #300 }
Perhatikan bahwa " :target "
Dalam hal ini, CSS akan mengontrol tautan jangkar http: //www.example.com/index.html #content-primary (tautan jangkar dapat dipahami sebagai tautan dalam halaman web, dibandingkan dengan hasil yang terlihat di beberapa web halaman) atas )
Penulis mengatakan bahwa browser Mozilla dan Safari sekarang mendukung hal ini
masukan[type="teks"]:diaktifkan { latar belakang:#ffc;
masukan[type="teks"]:dinonaktifkan { latar belakang:#ddd;
Perhatikan bahwa " [type="text"]:enabled "
Ini adalah CSS yang mengontrol formulir. "[u][type="text"][/u]" sepertinya berarti tipe dalam formulir adalah teks. . . Apa yang akan menjadi [u]type="password"[/u]?
masukan:dicentang { batas:1px padat #090;
Perhatikan bahwa " :dicentang "
Ini adalah CSS yang mengontrol "pilih" formulir. . .
Penulis mengatakan bahwa browser Opera dan Mozilla sekarang mendukung hal ini
:root { latar belakang:#ff0 }
html { latar belakang:#ff0 }
Mohon diperhatikan " :root "
":root" ini adalah tag tingkat yang lebih tinggi dari html. Anda dapat membaca artikel yang ditulis oleh Chidori Ichiba untuk memahami html dan isi dengan benar. Dia menemukan di artikel bahwa ada bingkai di luar html, hehe~
Penulis mengatakan bahwa browser Mozilla dan Safari sekarang mendukung hal ini
Berikutnya : nth-child() lebih menarik, haha~ Kamu bisa memasukkan angka dan huruf default di dalam tanda kurung~
p:anak ke-n(3) { warna:#f00 }
Artinya, berdasarkan P pertama yang muncul, semua P yang merupakan kelipatan "3" akan dikontrol~
p:anak ke-n(ganjil) { warna:#f00 }
Artinya, berdasarkan P pertama yang muncul, semua bilangan ganjil dari P akan terkontrol~
p:anak ke-n(genap) { warna:#f00 }
Artinya, berdasarkan P pertama yang muncul, semua P dalam bilangan genap akan terkontrol~
p:anak ke-n(3n+0) { warna:#f00 }
p:anak ke-n(3n) { warna:#f00 }
Kedua tag ini setara, karena 0 setelah yang pertama tidak berpengaruh. Artinya P yang 3 kali P pertama yang muncul akan dikontrol~ (Alangkah anehnya, HOHO~ [ rolleyes]) Dengan kata lain , "n" ini akan mengambil nilai dari 0.1.2.3.4.5.6....~ Sebanyak P yang dapat Anda hitung akan dikontrol. . .
tr:anak ke-n(2n+11) { latar belakang:#ff0 }
Jika anda memahami hal di atas, hal ini tidak sulit untuk dipahami, namun label yang dikuasainya telah berubah menjadi "tr". Artinya tabelnya akan menjadi lebih bervariasi. Saya rasa setiap orang pasti pandai berhitung di sekolah dasar dan tidak belajar baiklah. Cepat pulang dan pelajari aritmatika dasar lagi. . . (Namun, apakah label seperti itu meningkatkan efisiensi pemrosesan komputer? [bingung] Saya harap rasa frustrasi saya tidak diperlukan...)
p:anak terakhir { latar belakang:#ff0 }
A p sebelum p dikendalikan (NND, p datang dan pergi, mengenai pp [keringat])
:tidak(p) { batas:1px padat #ccc;
P ini tidak terkontrol, artinya menggunakan gaya tersendiri. . .
p ~ ul { latar belakang:#ff0 }
ul ditampilkan dengan prioritas di atas p. Saya tidak tahu metode prioritas apa ini. . .
Pada dasarnya, hanya itu yang dapat saya pahami. Anda dapat mengunjungi dua situs web berikut untuk terus belajar. Jika saya mengatakan sesuatu yang salah, ingatlah untuk memberi tahu saya.
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/