Pemilihan Pemilihan Sifat Dalam Rangkaian

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;}

Cuba sendiri

Contoh 2

Sama seperti di atas, boleh hanya menerapkan gaya kepada penyangga (elemen a) yang mempunyai sifat href:

a[href] {color:red;}

Cuba sendiri

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;}

Cuba sendiri

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;}

Cuba sendiri

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>

Lihat kesan

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;}

Cuba sendiri

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>

Cuba sendiri

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>

Lihat kesan

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;}

Cuba sendiri

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;}

Cuba sendiri

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.

Cuba sendiri

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;}

Cuba sendiri

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>

Cuba sendiri

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;}

Cuba sendiri

Tentu, penggunaan paling biasa daripada pemilih sifat ini adalah untuk padanan nilai bahasa.

CSS 选择器参考手册

Panduan Rujukan Pemilihan CSS Pemilihan
Sesuai dengan nilai sifat yang berakhir dengan nilai yang disertakan.[value Deskripsi
Sesuai dengan nilai sifat yang berakhir dengan nilai yang disertakan.[Untuk memilih elemen yang memiliki sifat yang disertakan.*=value =
Sesuai dengan nilai sifat yang berakhir dengan nilai yang disertakan.[Untuk memilih elemen yang memiliki sifat dan nilai yang disertakan.*=value ~=
Sesuai dengan nilai sifat yang berakhir dengan nilai yang disertakan.[Untuk memilih elemen yang memiliki kata yang disertakan dalam nilai sifat.*=value |=
Sesuai dengan nilai sifat yang berakhir dengan nilai yang disertakan.[Untuk memilih elemen yang memiliki nilai sifat yang mulai dengan nilai yang disertakan, nilai tersebut harus menjadi kata keseluruhan.*=value ^=
Sesuai dengan nilai sifat yang berakhir dengan nilai yang disertakan.[Sesuai dengan nilai sifat yang mulai dengan nilai yang disertakan.*=value $=
Sesuai dengan nilai sifat yang berakhir dengan nilai yang disertakan.[sifat*=value ]