Pemilihan Pemilihan Sifat Dalam Rangkaian
- Sesuai dengan nilai sifat yang disertakan. Pemilihan ID Dalam Rangkaian
- Halaman Sebelumnya Pemilihan Anak Elemen
CSS 2 mengenalkan pemilih sifat.
Pemilih sifat boleh memilih elemen berdasarkan sifat dan nilai sifat elemen.
Pemilih Sifat Sederhana
Jika ingin memilih elemen yang mempunyai sifat tertentu, tanpa mengira nilai sifat, boleh digunakan pemilih sifat sederhana.
Contoh 1
Jika ingin menjadikan semua elemen yang mengandungi tajuk (title) berwarna merah, boleh ditulis:
*[title] {color:red;}
Contoh 2
Sama seperti di atas, boleh hanya menerapkan gaya kepada penyangga (elemen a) yang mempunyai sifat href:
a[href] {color:red;}
Contoh 3
Boleh pilih berdasarkan beberapa sifat, hanya perlu menghubungkan pemilih sifat bersama-sama.
Contoh, untuk membuat teks hyperlink HTML yang memiliki atribut href dan title menjadi merah, boleh ditulis seperti ini:
a[href][title] {color:red;}
Contoh 4
Boleh digunakan beberapa cara kreatif untuk ciri ini.
Contoh, boleh digunakan untuk semua imej yang memiliki atribut alt, untuk menonjolkan imej yang sah ini:
img[alt] {border: 5px solid red;}
Petikan:Kasus khusus ini lebih sesuai untuk diagnosa daripada desain, iaitu untuk menentukan sama ada imej benar-benar sah atau tidak.
Contoh 5: Gunakan pemilihan sifat untuk dokumen XML
Pemilihan pilihan sifat sangat berguna dalam dokumen XML, karena bahasa XML mendukung penentuan nama elemen dan atribut untuk tujuan elemen dan atribut.
Dengan asumsi kami telah merancang dokumen XML untuk menggambarkan planet sistem surya. Jika kami ingin memilih semua elemen planet yang memiliki sifat moons, untuk menampilkan warna merah, supaya dapat menekankan planet yang memiliki moons, boleh ditulis seperti ini:
planet[moons] {color:red;}
Ini akan membuat teks elemen kedua dan ketiga dalam fragmen tag di bawah ini ditampilkan dalam warna merah, tetapi teks elemen pertama bukan warna merah:
<planet>Bangsa</planet> <planet moons="1">Bumi</planet> <planet moons="2">Mars</planet>
Pemilihan berdasarkan nilai sifat spesifik
Selain memilih elemen yang memiliki sifat tertentu, pengesanan lebih kecil boleh diperluas untuk hanya memilih elemen yang memiliki nilai sifat tertentu.
Contoh 1
Contoh 1, supaya hyperlink yang mengarah ke dokumen yang ditentukan di pelayan Web menjadi merah, boleh ditulis seperti ini:
a[href="http://www.codew3c.com/about_us.asp"] {color: red;}
Contoh 2
Seperti pemilihan pilihan sederhana, beberapa pemilihan pilihan nilai-nilai boleh dihubungkan untuk memilih dokumen.
a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}
Ini akan membuat teks pautan pertama dalam tag yang disediakan menjadi merah, tetapi pautan kedua atau ketiga tidak terpengaruh:
<a href="http://www.codew3c.com/" title="W3School">W3School</a> <a href="http://www.codew3c.com/css/" title="CSS">CSS</a> <a href="http://www.codew3c.com/html/" title="HTML">HTML</a>
Contoh 3
Juga, bahasa XML boleh menggunakan cara ini untuk menetapkan gaya.
Kembali ke contoh planet. Jika hanya mahu memilih elemen planet yang nilai atributnya adalah 1 untuk moons, boleh digunakan pemilih di bawah ini:
planet[moons="1"] {color: red;}
Kode di atas akan menjadikan elemen kedua dalam tanda petunjuk di bawah ini menjadi merah, tetapi elemen pertama dan ketiga tidak terpengaruh:
<planet>Bangsa</planet> <planet moons="1">Bumi</planet> <planet moons="2">Mars</planet>
Atribut dan nilai atribut mesti sepenuhnya disesuaikan
Perhatikan, format ini memerlukan sejalan sepenuhnya dengan nilai atribut.
Jika nilai atribut mengandungi senarai nilai yang dipisahkan dengan ruang, kemungkinan ada masalah penyingkiran.
Berhati-hatilah fragmen tanda di bawah ini:
<p class="important warning">Paragraf ini adalah peringatan yang sangat penting.</p>
Jika ditulis p[class="important"], aturan ini tidak akan disesuaikan dengan tanda petunjuk contoh.
Untuk memilih elemen berdasarkan nilai atribut khusus, perlu ditulis seperti ini:
p[class="important warning"] {color: red;}
Pemilihan sebahagian nilai atribut
Jika perlu memilih berdasarkan kata dalam senarai nilai atribut, perlu menggunakan tanda panah (~).
Jika anda ingin memilih elemen yang mengandungi class atribut "important", boleh digunakan pemilih di bawah ini untuk mencapai tujuannya:
p[class~="important"] {color: red;}
Jika diabaikan tanda panah, maka artinya perlu selesai dengan penggabungan nilai sepenuhnya.
Perbezaan pemilih sebahagian nilai atribut dengan penerangan class titik.
Pemilih ini adalah sama dengan yang kita diskusikan dalam penerangan pemilih class.
Artinya, p.important dan p[class="important"] adalah sama dalam meng aplikasikan ke dokumen HTML.
Tetapi, kenapa harus ada pemilih atribut "~="? Karena ia boleh digunakan untuk mana-mana atribut, bukan hanya class.
contoh, boleh ada dokumen yang mengandungi banyak imej, di mana hanya sebahagian darinya adalah imej. Bagi itu, boleh digunakan pemilih sebahagian asal yang berdasarkan ciri title dokumen, hanya memilih imej-imej ini:
img[title~="Figure"] {border: 1px solid gray;}
Peraturan ini akan memilih semua imej yang teks judul mengandungi "Figure". Imej yang tidak mempunyai sifat judul atau teks judulnya tidak mengandungi "Figure" tidak akan padanan.
Pemilih Sifat Saringan Substring
Berikut ini akan diperkenalkan modul pemilih yang lebih tinggi, yang diterbitkan setelah CSS2 selesai, yang mengandungi banyak lagi pemilih nilai sebahagian daripada sifat. Menurut penggunaan standar, ia seharusnya disebut "Pemilih Sifat Saringan Substring".
Banyak pelayar modern mendukung pemilih ini, termasuk IE7.
Tabel di bawah adalah ringkasan yang sederhana tentang pemilih ini:
Tipe | Pemilihan |
---|---|
[abc^="def"] | Pilih semua elemen yang nilai sifat abc bermula dengan "def". |
[abc$="def"] | Pilih semua elemen yang nilai sifat abc berakhir dengan "def". |
[abc*="def"] | Pilih semua elemen yang nilai sifat abc mengandungi susun "def". |
Dapat dipikirkan, ada banyak kegunaan daripada pemilih ini.
Sebagai contoh, jika hendak menerapkan gaya ke semua pautan yang mengarah ke CodeW3C.com, tiada perlu menentukan class untuk semua pautan ini, dan menulis gaya untuk class ini; hanya perlu menulis peraturan di bawah:
a[href*="codew3c.com"] {color: red;}
Petikan:Setiap sifat boleh digunakan pemilih ini.
Tipe pemilih sifat khusus
Akhirnya, akan diperkenalkan pemilih sifat khusus. Lihat contoh di bawah:
*[lang|="en"] {color: red;}
Atau peraturan di atas akan memilih semua elemen yang sifat lang sama dengan en atau bermula dengan en-; maka tiga elemen pertama di bawah contoh tanda ini akan dipilih, tetapi dua elemen terakhir tidak akan dipilih:
<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-<p lang="au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>
Secara umum, [att|="val"] boleh digunakan untuk setiap sifat dan nilai.
Dengan asumsi ada sekumpulan imej dalam dokumen HTML, di mana setiap imej mempunyai nama fail seperti: figure-1.jpg dan figure-2.jpgDengan demikian, boleh digunakan pemilih berikut untuk padanan semua imej yang ada:
img[src|="figure"] {border: 1px solid gray;}
Tentu, penggunaan paling biasa daripada pemilih sifat ini adalah untuk padanan nilai bahasa.
CSS 选择器参考手册
- Sesuai dengan nilai sifat yang disertakan. Pemilihan ID Dalam Rangkaian
- Halaman Sebelumnya Pemilihan Anak Elemen