Panduan sifat pemilih CSS: pemilih id, kelas dan atribut

Panduan Ciri Pemilih CSS: id, kelas dan pemilih atribut

CSS (Cascading Style Sheets) digunakan untuk menerangkan kandungan pada web halaman Bahasa untuk bagaimana unsur-unsur diberikan dan dibentangkan. Dalam CSS, pemilih digunakan untuk memilih elemen HTML tertentu dan kemudian menggunakan peraturan gaya.

Artikel ini akan memfokuskan pada tiga atribut pemilih biasa: id, kelas dan pemilih atribut serta memberikan contoh kod khusus.

1. pemilih id

Pemilih id digunakan untuk memilih elemen dengan atribut id tertentu, yang perlu unik dalam HTML. Dalam CSS, sintaks untuk pemilih id adalah untuk mendahului nama pemilih dengan simbol #. Berikut ialah contoh:

<div id="header">这是网页的页眉</div>

#header {
  background-color: blue;
  color: white;
}

Kod di atas mewakili elemen div dengan id "header", yang warna latarnya biru dan warna teksnya berwarna putih.

2. pemilih kelas

pemilih kelas digunakan untuk memilih elemen dengan atribut kelas tertentu Satu elemen boleh mempunyai berbilang atribut kelas dan berbilang Elemen boleh berkongsi atribut kelas yang sama. Dalam CSS, sintaks untuk pemilih kelas adalah untuk menambah simbol . Berikut ialah contoh:

<p class="highlight">这是一个高亮的段落</p>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

Kod di atas mewakili elemen p dengan kelas "highlight", yang warna latarnya kuning dan teksnya tebal.

3. Pemilih atribut

Pemilih atribut digunakan untuk memilih elemen dengan atribut khusus, yang boleh dipilih berdasarkan nilai atribut. Dalam CSS, sintaks untuk pemilih atribut datang dalam pelbagai bentuk. Berikut ialah beberapa contoh:

• Pilih elemen dengan atribut khusus:

<a href="#">这是一个链接</a>

a[href] {
  color: blue;
}

Kod di atas bermaksud memilih semua elemen dengan atribut href , set warna teks mereka kepada biru.

• Pilih elemen dengan atribut dan nilai atribut tertentu:

<input type="text" value="请输入用户名">

input[type="text"] {
  width: 200px;
}

Kod di atas bermaksud memilih semua elemen input yang jenis atributnya ialah "teks" , tetapkan lebarnya kepada 200px.

• Pilih elemen bermula dengan nilai atribut tertentu:

<img src="images/logo.png" alt="Logo">
<img src="images/banner.jpg" alt="Banner">

img[src^="images/"] {
  border: 1px solid gray;
}

Kod di atas bermaksud memilih semua nilai atribut src bermula dengan "imej/ " elemen img dan tambahkan sempadan kelabu padanya.

Ringkasan:

Dengan menggunakan pemilih id, kelas dan atribut, kita boleh memilih elemen pada halaman web dengan lebih tepat dan menggunakan gaya tertentu padanya. Dalam pembangunan sebenar, penggunaan fleksibel pemilih ini boleh meningkatkan kebolehgunaan semula dan kebolehselenggaraan CSS.

Di atas ialah pengenalan ringkas kepada panduan sifat pemilih CSS dan menyediakan contoh kod yang sepadan. Saya harap ia akan membantu semua orang untuk memahami dan menggunakan pemilih CSS!

Atas ialah kandungan terperinci Panduan sifat pemilih CSS: pemilih id, kelas dan atribut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!