[CSS/DIV] Menganalisis penggunaan empat pemilih nilai atribut CSS utama

Artikel ini akan menjelaskannya kepada AndaPemilih nilai properti CSSFormat pemilih atribut adalah elemen diikuti dengan tanda kurung, dengan atribut dalam tanda kurung, atau ekspresi atribut (saya tidak tahu apakah deskripsinya benar, kata-kata yang dibuat sendiri), seperti h1[title="logo"], dll., Saya yakin Anda akan belajar banyak di artikel ini.

Tutorial CSS: Pemilih Nilai Atribut CSS

CSS AttributeSelectors, mungkin Anda tidak boleh asing dengan pemilih atribut, pada dasarnya, id dan class selector sebenarnya adalah pemilih nilai atribut, cukup pilih id atau class value.

Format pemilih atribut adalah elemen diikuti dengan tanda kurung, dengan atribut dalam tanda kurung, atau ekspresi atribut (saya tidak tahu apakah deskripsinya benar, kata-kata yang dibuat sendiri), seperti h1[title], h1[title="Logo"], dll., Anda dapat melihat 4 bentuk spesifik dari diskusi saya di bawah ini.

1. Pemilih nilai atribut CSS sederhana

Terlepas dari namanya, ini adalah karakteristik pemilih atribut sederhana.

h1[kelas]{warna:perak; akan bekerja pada elemen h1 apa pun dengan kelas, terlepas dari nilai kelas. Oleh karena itu<h1class="hoopla">Halo</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 dari Fooling</h1> akan dipengaruhi oleh aturan ini.

Tentu saja, "properti" ini bukan hanya kelas atau id, tetapi dapat berupa semua properti sah dari elemen tersebut, seperti alt img, seperti img[alt]{cssdeclarationshere; akan berlaku untuk elemen img apa pun dengan atribut alt. Kemudian a[href][title]{font-weight:bold; Bagaimana dengan }? Seperti yang Anda ketahui, ini bekerja pada elemen dengan atribut href dan title, seperti <atitle="W3CHome">W3C</a>.

2. Pemilih nilai atribut CSS yang tepat

id dan class pada dasarnya adalah pemilih nilai atribut yang tepat, ya, h1#logo sama dengan h1[id="logo"]. Seperti yang disebutkan sebelumnya, kami tidak membatasi diri pada id atau kelas, kami dapat menggunakan properti apa pun! Misalnya, a[][title="W3CHome"]{font-size:200%; } akan diterapkan ke <atitle="W3CHome">W3C</a>.

3. Beberapa pemilih nilai atribut CSS

Seperti namanya, selama nilai atribut sebagian cocok (dalam hal ini, bagian yang benar-benar cocok dengan seluruh kata) akan bekerja pada elemen. Mari kita lihat contohnya:

Salah satu dari ini dapat membuat font p tebal.

Pemilih ini sangat berguna, misalnya, jika Anda ingin menata ilustrasi dengan string "Figure" dalam judulnya, misalnya title="Figure5:xxx description", Anda dapat menggunakan img[title~="Figure"].

Perlu dicatat bahwa seperti yang saya tekankan di kalimat pertama, Anda harus mencocokkan seluruh kata, dan img[title~="Figure"] tidak akan cocok dengan title="Gambar5:xxx deskripsi".

Juga, saya melakukan sedikit pengujian, Anda mengubah "Figure" menjadi "Illustration" dalam contoh, dan mengubah img[title~="Figure"] menjadi img[title~="Illustration"], dan itu masih cocok di Firefox, terlepas dari apakah pengkodeannya adalah GB2312 atau UTF-8. Tampaknya dukungan CSS untuk bahasa Cina tidak buruk.

4. Pemilih nilai atribut CSS khusus

Agak aneh, pemilih ini. Cara kerjanya seperti ini, yah, lebih mudah untuk memberikan contoh daripada menggambarkannya.

*[lang|="en"]{color:white; Aturan ini akan memilih nilai atribut lang atau elemen yang dimulai dengan en-. Artinya, bisa cocok dengan <h1lang="en">Halo!</h1>, <plang="en-us">Salam!</p>dan <divlang="en-au">G'day!</div>dan tidak cocok<plang="fr">Bonjour!</p>dan <h3lang="cy-en">Jrooana!</h3>.