Rumah >hujung hadapan web >tutorial css >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.
Tulis kod CSS berikut untuk menetapkan warna latar belakang semua elemen butang jenis "butang" kepada merah:
button[type="button"] { background-color: red; }
Tulis kod CSS berikut untuk menetapkan warna teks semua elemen dengan kelas "serlah" kepada biru:
.highlight { color: blue; }
Tulis kod CSS berikut untuk menetapkan warna latar belakang elemen bar navigasi dengan id "navbar" kepada kelabu:
#navbar { background-color: gray; }
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; }
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; }
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!