Mahir menggunakan pemilih atribut CSS biasa

Untuk menguasai pemilih atribut CSS biasa, contoh kod khusus diperlukan

CSS ialah bahasa yang digunakan untuk mengawal gaya halaman web Ia boleh menambah gaya dan reka letak pada elemen HTML. Dalam CSS, pemilih atribut ialah pemilih yang sangat berguna Ia boleh memilih elemen yang sepadan mengikut nilai atributnya, supaya mudah mengubah suai gayanya.

Yang berikut akan memperkenalkan beberapa pemilih atribut CSS yang biasa digunakan dan memberikan contoh kod khusus.

1. Pemilih [jenis]: Pilih elemen berdasarkan atribut jenisnya.

Tulis kod CSS berikut untuk menetapkan warna latar belakang semua elemen butang jenis "butang" kepada merah:

button[type="button"] {
  background-color: red;
}

2. Pemilih [kelas]: Pilih elemen berdasarkan atribut kelasnya.

Tulis kod CSS berikut untuk menetapkan warna teks semua elemen dengan kelas "serlah" kepada biru:

.highlight {
  color: blue;
}

3. Pemilih [id]: Pilih elemen berdasarkan atribut id mereka.

Tulis kod CSS berikut untuk menetapkan warna latar belakang elemen bar navigasi dengan id "navbar" kepada kelabu:

#navbar {
  background-color: gray;
}

4. Selector [attr~=value]: Memilih elemen dengan atribut yang ditentukan dan nilai atribut mengandungi unsur kosa kata tertentu.

Tulis kod CSS berikut untuk menetapkan warna teks kepada hijau untuk elemen dengan atribut "lang" dan nilai atribut yang mengandungi "en":

[lang~="en"] {
  color: green;
}

5. Selector [attr^=value]: Memilih elemen dengan atribut yang ditentukan dan Elemen yang nilai atributnya bermula dengan nilai tertentu.

Tulis kod CSS berikut untuk menetapkan gaya fon kepada condong untuk elemen yang mempunyai atribut "data-" dan nilai atributnya bermula dengan "menu":

[data^="menu"] {
  font-style: italic;
}

6. Selector [attr$=value]: Memilih elemen dengan Elemen atribut yang ditentukan yang nilai atributnya berakhir dengan nilai tertentu.

Tulis kod CSS berikut untuk menetapkan warna teks elemen pautan dengan atribut "href" dan nilai atribut berakhir dengan ".pdf" kepada merah:

[href$=".pdf"] {
  color: red;
}

Ini adalah pemilih atribut CSS yang biasa digunakan yang pantas dan tepat Pilih elemen yang ditentukan dan ubah suai gayanya. Dengan menggunakan pemilih ini secara fleksibel, kami boleh mengawal gaya halaman web dengan lebih mudah.

Saya harap kandungan di atas dapat membantu anda lebih memahami dan menguasai penggunaan pemilih atribut CSS. Saya berharap anda mendapat hasil yang lebih baik apabila menggunakan CSS!

Atas ialah kandungan terperinci Mahir menggunakan pemilih atribut CSS biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!