Menyahmistifikasikan Pemilih Harta CSS

Rahsia Pemilih Atribut CSS Didedahkan

Pemilih Atribut CSS ialah alat yang sangat berguna dan berkuasa yang membolehkan kami memilih dan menggayakan elemen tertentu mengikut nilai atributnya. Pemilih atribut ini boleh memadankan dan memilih berdasarkan nilai atribut elemen, tempat nilai atribut muncul dan aksara khusus dalam nilai atribut. Artikel ini akan mendedahkan rahsia pemilih atribut CSS melalui contoh kod tertentu.

Mula-mula, mari belajar tentang beberapa pemilih atribut CSS asas. Pemilih atribut yang paling biasa ialah "[atribut]", yang digunakan untuk memilih elemen dengan atribut tertentu. Contohnya, jika kita ingin memilih semua elemen dengan atribut "title", kita boleh menggunakan kod berikut:

[title] {
  color: blue;
}

Dengan cara ini, semua elemen dengan atribut "title" akan menggunakan warna teks biru.

Selain pemilih atribut mudah, terdapat juga beberapa pemilih atribut yang lebih maju yang boleh digunakan. Sebagai contoh, kita boleh menggunakan pemilih nilai atribut untuk memilih elemen dengan nilai atribut tertentu. Pemilih nilai atribut ditulis sebagai "[attribute=value]". Berikut ialah contoh:

input[type="text"] {
  border: 1px solid black;
}

Kod ini akan memilih semua kotak input jenis "teks" dan menetapkan gaya sempadannya kepada garis hitam pejal.

Satu lagi pemilih atribut yang berkuasa ialah "[attribute^=value]", yang boleh memilih elemen yang nilai atributnya bermula dengan rentetan tertentu. Sebagai contoh, jika kita ingin memilih semua ​​elemen yang pautannya bermula dengan "http://", kita boleh menggunakan kod berikut:

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

Dengan cara ini, semua pautan yang bermula dengan "http://" akan mempunyai teks merah warna yang digunakan.

Begitu juga, terdapat pemilih atribut "[attribute$=value]", yang memilih elemen yang nilai atributnya berakhir dengan rentetan tertentu. Contohnya, jika kita ingin memilih semua ​​elemen yang pautannya berakhir dengan ".com", kita boleh menggunakan kod berikut:

a[href$=".com"] {
  text-decoration: underline;
}

Kod ini akan menggariskan semua pautan yang berakhir dengan ".com".

Akhir sekali, terdapat pemilih atribut "[attribute*=value]", yang memilih elemen yang nilai atributnya mengandungi rentetan tertentu. Sebagai contoh, jika kita ingin memilih semua ​​elemen yang mengandungi "google" dalam pautan mereka, kita boleh menggunakan kod berikut:

a[href*="google"] {
  font-weight: bold;
}

Dengan cara ini, gaya tebal akan digunakan pada semua pautan yang mengandungi "google".