Penjelasan terperinci tentang sifat pemilih CSS: pemilih id, kelas dan atribut-tutorial css-php.cn

Penjelasan terperinci tentang sifat pemilih CSS: pemilih id, kelas dan atribut

PHPz

Lepaskan： 2023-10-20 16:47:05

asal

1620 orang telah melayarinya

<p>

<p>CSS (Cascading Style Sheets) ialah bahasa penanda yang digunakan untuk mentakrifkan gaya halaman web, warna, fon dan kesan visual yang lain. Dalam CSS, pemilih ialah corak yang digunakan untuk mencari dan memilih elemen HTML untuk digayakan. Atribut pemilih termasuk id, kelas, pemilih atribut, dsb., yang mewakili kaedah pemilihan yang berbeza. Artikel ini menerangkan ketiga-tiga sifat pemilih ini secara terperinci dan menyediakan contoh kod khusus.

1. Pemilih id

<p>Pemilih id memilih elemen dengan memberikan atribut id unik kepada elemen tertentu. Nilai atribut id mestilah unik dalam dokumen HTML. Dalam CSS, pemilih id menggunakan simbol # ditambah dengan nilai atribut id untuk memilih elemen. # 符号加上 id 属性的值来选择元素。

<p>例如，给一个 <div> 元素添加 id 属性并使用 id 选择器来样式化它：

<div id="myDiv">这是一个示例</div>

Salin selepas log masuk

#myDiv {
  color: red;
  font-size: 16px;
}

Salin selepas log masuk

<p>上述代码演示了一个 id 选择器的示例。id 选择器 #myDiv 会选择具有 id 属性值为 "myDiv" 的 <div> 元素，并将其文本颜色设置为红色，字体大小设置为 16 像素。通过指定唯一的 id 属性值，我们可以选择并样式化特定的元素。

2. class 选择器

<p>class 选择器通过给一个或多个元素指定相同的 class 名称来选择元素。在 CSS 中，class 选择器使用 . 符号加上 class 名称来选择元素。

<p>例如，给两个 <p> 元素添加相同的 class 名称并使用 class 选择器来样式化它们：

<p class="myClass">这是第一个段落</p>
<p class="myClass">这是第二个段落</p>

Salin selepas log masuk

.myClass {
  background-color: yellow;
  padding: 10px;
}

Salin selepas log masuk

<p>上述代码演示了一个 class 选择器的示例。class 选择器 .myClass 会选择具有 class 名称为 "myClass" 的所有元素，并将它们的背景颜色设置为黄色，添加 10 像素的内边距。通过指定相同的 class 名称，我们可以选择一组元素并统一样式化它们。

3. 属性选择器

<p>属性选择器通过选择具有特定属性或属性值的元素来选择元素。在 CSS 中，属性选择器使用方括号 [] 加上属性名（可选：还可以添加属性值）来选择元素。

<p>例如，选择具有 title 属性的 <img> 元素：

<img src="image.jpg" alt="图片" title="这是一个图片">

Salin selepas log masuk

img[title] {
  border: 1px solid black;
}

Salin selepas log masuk

<p>上述代码演示了一个属性选择器的示例。属性选择器 img[title] 会选择具有 title 属性的所有 <img> 元素，并给它们添加一个黑色的 1 像素边框。我们还可以进一步指定特定的属性值，如 img[title="这是一个图片"]，这样就只会选择 title 属性值为 "这是一个图片" 的 <img>

Sebagai contoh, tambahkan atribut id pada elemen <div> dan gunakan pemilih id untuk menggayakannya: <p>rrreeerrreee

Kod di atas menunjukkan contoh pemilih id. Pemilih id #myDiv akan memilih elemen <div> dengan nilai atribut id "myDiv" dan menetapkan warna teksnya kepada merah dan saiz fon kepada 16 piksel. Dengan menentukan nilai atribut id unik, kami boleh memilih dan menggayakan elemen tertentu. 🎜🎜2. Pemilih kelas 🎜🎜Pemilih kelas memilih elemen dengan memberikan nama kelas yang sama kepada satu atau lebih elemen. Dalam CSS, pemilih kelas menggunakan notasi . ditambah dengan nama kelas untuk memilih elemen. 🎜🎜Sebagai contoh, tambahkan nama kelas yang sama pada dua elemen <p> dan gunakan pemilih kelas untuk menggayakannya: 🎜rrreeerrreee🎜Kod di atas menunjukkan contoh pemilih kelas. Pemilih kelas .myClass memilih semua elemen dengan nama kelas "myClass" dan menetapkan warna latar belakangnya kepada kuning, menambah 10 piksel padding. Dengan menyatakan nama kelas yang sama, kita boleh memilih kumpulan elemen dan menggayakannya secara seragam. 🎜🎜3. Pemilih Atribut 🎜🎜Pemilih atribut memilih elemen dengan memilih elemen dengan atribut atau nilai atribut tertentu. Dalam CSS, pemilih atribut menggunakan kurungan segi empat sama [] diikuti dengan nama atribut (pilihan: anda juga boleh menambah nilai atribut) untuk memilih elemen. 🎜🎜Sebagai contoh, untuk memilih elemen <img> dengan atribut tajuk: 🎜rrreeerrreee🎜Kod di atas menunjukkan contoh pemilih atribut. Pemilih atribut img[title] memilih semua elemen <img> dengan atribut tajuk dan menambahkan jidar 1 piksel hitam padanya. Kami juga boleh menentukan nilai atribut khusus, seperti img[title="This is a picture"], supaya hanya &lt yang nilai atribut tajuknya ialah "This is a picture" akan menjadi elemen ;img> dipilih. 🎜🎜Ringkasnya, id, kelas dan pemilih atribut ialah tiga sifat pemilih CSS yang biasa digunakan. Dengan menggunakannya dengan sewajarnya, kita boleh memilih dan menggayakan elemen tertentu dalam halaman web. Semoga contoh kod khusus yang disediakan dalam artikel ini akan membantu anda memahami dan menggunakan sifat pemilih ini dengan lebih baik. Jika anda mempunyai lebih banyak soalan tentang pemilih CSS, anda boleh menyemak dokumentasi atau tutorial yang berkaitan untuk pembelajaran dan penguasaan yang lebih mendalam. 🎜

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