Rumah  >  Artikel  >  hujung hadapan web  >  Mahir menggunakan pemilih atribut CSS biasa

Mahir menggunakan pemilih atribut CSS biasa

王林
王林asal
2024-01-13 08:01:191142semak imbas

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;
}
  1. 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;
}
  1. 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;
}
  1. 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;
}
  1. 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;
}
  1. 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!

Kenyataan:
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

Artikel berkaitan

Lihat lagi