Apakah pemilih atribut yang terdapat dalam pemilih css?

百草
Lepaskan: 2023-10-07 14:50:48
asal
2682 orang telah melayarinya

Pemilih atribut pemilih CSS termasuk pemilih sama, mengandungi pemilih, pemilih mula, pemilih tamat, pemilih subrentetan, pemilih berbilang nilai dan pemilih negatif, dsb. Pengenalan terperinci: 1. Pemilih sama, menggunakan kurungan segi empat sama dan tanda sama, bermaksud memilih elemen dengan nilai atribut yang ditentukan 2. Pemilih yang mengandungi, menggunakan kurungan segi empat sama dan asterisk, bermaksud memilih elemen yang mengandungi nilai atribut rentetan yang ditentukan; Mulakan pemilih, gunakan kurungan segi empat sama dan asterisk, untuk memilih elemen dengan nilai atribut bermula dengan rentetan yang ditentukan 4. Tamatkan pemilih, gunakan kurungan segi empat sama dan tanda dolar, dsb.

Apakah pemilih atribut yang terdapat dalam pemilih css?

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Pemilih CSS menyediakan pelbagai pemilih atribut untuk memilih elemen berdasarkan nilai atributnya. Pemilih atribut ini boleh memilih berdasarkan kesamaan, kemasukan, permulaan, tamat, dsb. nilai atribut. Berikut ialah pemilih atribut biasa dalam CSS:

1 Sama dengan Pemilih: Gunakan kurungan segi empat sama ([]) dan tanda sama (=) untuk memilih elemen dengan nilai atribut yang ditentukan. Sebagai contoh, `[class="red"]` bermaksud memilih semua elemen yang nilai atribut kelasnya ialah "merah".

2. Mengandungi Pemilih: Gunakan kurungan segi empat sama ([]) dan asterisk (*) untuk memilih elemen yang mengandungi nilai atribut rentetan yang ditentukan. Sebagai contoh, `[href*="example"]` bermaksud memilih semua elemen yang nilai atribut hrefnya mengandungi "contoh".

3 Bermula Dengan Pemilih: Gunakan kurungan segi empat sama ([]) dan tanda tajam (^) untuk memilih elemen dengan nilai atribut bermula dengan rentetan yang ditentukan. Contohnya, `[class^="red"]` bermaksud memilih semua elemen yang nilai atribut kelasnya bermula dengan "merah".

4 Berakhir Dengan Pemilih: Gunakan kurungan segi empat sama ([]) dan tanda dolar ($) untuk memilih elemen dengan nilai atribut yang berakhir dengan rentetan yang ditentukan. Contohnya, `[class$="red"]` bermaksud memilih semua elemen yang nilai atribut kelasnya berakhir dengan "merah".

5. Pemilih Subrentetan: Gunakan kurungan segi empat sama ([]) dan simbol bar menegak (|) untuk memilih elemen dengan nilai atribut yang ditentukan, atau nilai atribut bermula dengan rentetan yang ditentukan dan diikuti dengan elemen sempang. Contohnya, `[lang|="en"]` bermaksud memilih semua elemen yang nilai atribut langnya ialah "en", atau elemen yang nilai atributnya bermula dengan "en-".

6. Pemilih Berbilang Nilai: Gunakan kurungan segi empat sama ([]) dan tanda sama (=) untuk menentukan berbilang nilai atribut pada masa yang sama, yang bermaksud memilih elemen dengan mana-mana nilai atribut yang ditentukan. Asingkan berbilang nilai atribut dengan ruang. Contohnya, `[class="red blue"]` bermaksud memilih semua elemen yang nilai atribut kelasnya ialah "merah" atau "biru".

7. Pemilih Negasi: Gunakan kurungan segi empat sama ([]) dan bertindih (:not()) untuk memilih elemen yang tidak mempunyai nilai atribut yang ditentukan. Sebagai contoh, `[class]:not([class="red"])` bermaksud memilih semua elemen yang mempunyai atribut kelas tetapi bukan "merah".

Di atas adalah pemilih atribut biasa dalam CSS Dengan menggunakan pemilih ini, kami boleh memilih dan menggayakan elemen dalam halaman web berdasarkan nilai atribut mereka untuk mencapai kesan yang kaya dan pelbagai. Pada masa yang sama, pemilih atribut juga boleh digunakan dalam kombinasi dengan pemilih lain dan pemilih kelas pseudo untuk mengembangkan lagi skop dan syarat pemilihan.

Atas ialah kandungan terperinci Apakah pemilih atribut yang terdapat dalam pemilih css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan