Kuasai kemahiran aplikasi pemilih atribut CSS

Mempelajari cara menggunakan pemilih atribut CSS memerlukan contoh kod khusus

Dengan perkembangan pesat Internet, reka bentuk dan pembangunan web telah menjadi industri yang popular. Sebagai salah satu teknologi asas pembangunan web, CSS (Cascading Style Sheets) memainkan peranan penting dalam reka bentuk web. Pemilih atribut CSS ialah pemilih yang berkuasa dan biasa digunakan dalam CSS Ia boleh memilih elemen untuk tetapan gaya berdasarkan nilai atributnya. Artikel ini akan memperkenalkan cara menggunakan pemilih atribut CSS dan memberikan contoh kod khusus.

Pemilih atribut CSS membolehkan kami memilih elemen berdasarkan nilai atributnya. Ia mempunyai bentuk biasa berikut:

1. Pemilih atribut ([atribut]): Memilih elemen dengan atribut yang ditentukan. Sebagai contoh, anda boleh menggunakan [attr] untuk memilih semua elemen yang mempunyai atribut attr.
2. Pemilih atribut dengan tanda sama ([attribute=value]): Pilih elemen dengan atribut dan nilai yang ditentukan sama dengan nilai. Sebagai contoh, anda boleh menggunakan [attr=value] untuk memilih elemen yang nilai atribut attrnya ialah nilai.
3. Pemilih atribut padanan awalan ([attribute^=value]): memilih elemen yang mempunyai atribut yang ditentukan dan nilainya bermula dengan nilai. Sebagai contoh, anda boleh menggunakan [attr^=value] untuk memilih elemen yang nilai atribut attrnya bermula dengan nilai.
4. Pemilih atribut padanan akhiran ([attribute$=value]): Pilih elemen yang mempunyai atribut yang ditentukan dan nilainya berakhir dengan nilai. Sebagai contoh, anda boleh menggunakan [attr$=value] untuk memilih elemen yang nilai atribut attrnya berakhir dengan nilai.
5. Mengandungi pemilih atribut yang sepadan ([attribute=value]): memilih elemen yang mempunyai atribut yang ditentukan dan nilainya mengandungi nilai. Sebagai contoh, anda boleh menggunakan [attr=value] untuk memilih elemen yang nilai atribut attrnya mengandungi nilai.

Berikut ialah beberapa contoh khusus untuk menunjukkan penggunaan pemilih atribut CSS:

1. Pilih semua elemen dengan atribut tajuk dan tetapkan warnanya kepada merah:

[title] {
  color: red;
}

2. Pilih semua elemen dengan atribut kelas dan Elemen dengan nilai "contoh" dan tetapkan warna latar belakangnya kepada kuning:

[class=example] {
  background-color: yellow;
}

3. Pilih semua elemen dengan atribut href yang nilainya bermula dengan "http://" dan tetapkan warna teksnya kepada biru:

[href^="http://"] {
  color: blue;
}

4. Pilih semua elemen yang mempunyai atribut src dan nilai berakhir dengan ".jpg" dan tetapkan sempadannya kepada 1px merah:

[src$=".jpg"] {
  border: 1px solid red;
}

5. Pilih semua elemen yang mempunyai atribut alt dan nilai mengandungi "logo", Dan tetapkan saiz fonnya hingga 20px:

[alt*="logo"] {
  font-size: 20px;
}

Contoh di atas menunjukkan penggunaan asas pemilih atribut CSS, tetapi sebenarnya ia boleh melakukan lebih daripada itu. Dengan menggunakan pemilih atribut CSS secara fleksibel, kami boleh memilih elemen dengan lebih tepat untuk mencapai kesan gaya yang diingini.

Untuk meringkaskan, pemilih atribut CSS ialah salah satu pemilih yang biasa digunakan dalam CSS Ia boleh memilih elemen untuk tetapan gaya berdasarkan nilai atributnya. Kita boleh menggunakan borang pemilih atribut yang berbeza untuk memilih elemen mengikut keperluan kita dan menetapkan gaya untuk elemen ini untuk mencapai kesan tertentu. Untuk menguasai penggunaan pemilih atribut CSS dengan lebih baik, kami boleh berlatih lebih banyak dalam projek sebenar dan merujuk maklumat yang berkaitan untuk meningkatkan keupayaan reka bentuk dan pembangunan web kami.

Atas ialah kandungan terperinci Kuasai kemahiran aplikasi pemilih atribut CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!