Ketahui pemilih CSS biasa

Untuk memahami pemilih CSS yang biasa digunakan, contoh kod khusus diperlukan

Pemilih CSS ialah cara untuk memilih elemen HTML Ia membolehkan kami memilih gaya dengan memadankan atribut tertentu, nama teg atau syarat elemen lain. Pemahaman mendalam tentang pemilih CSS yang biasa digunakan adalah sangat penting untuk menulis helaian gaya CSS yang cekap dan mengurus struktur halaman web. Di bawah ialah beberapa pemilih CSS yang biasa digunakan dan contoh kod khusus mereka.

1. Pemilih Elemen:

Pemilih elemen ialah pemilih paling asas, memilih elemen mengikut nama teg.

Contoh kod:

p {
  color: red;
}

Kod di atas akan menetapkan warna teks semua elemen <p></p> kepada merah. <p></p> 元素的文本颜色设置为红色。

2. 类选择器（Class Selector）：

类选择器通过元素的class属性来选择元素。

代码示例：

.header {
  font-size: 20px;
}

以上代码将把所有class为 "header" 的元素的字体大小设置为 20 像素。

3. ID选择器（ID Selector）：

ID选择器通过元素的id属性来选择元素。

代码示例：

#container {
  width: 500px;
}

以上代码将把id为 "container" 的元素的宽度设置为 500 像素。

4. 后代选择器（Descendant Selector）：

后代选择器通过元素的层级关系来选择元素。

代码示例：

.container p {
  color: blue;
}

以上代码将把所有在class为 "container" 的元素内部的 <p></p> 元素的文本颜色设置为蓝色。

5. 子元素选择器（Child Selector）：

子元素选择器通过元素的直接子元素关系来选择元素。

代码示例：

.container > p {
  font-weight: bold;
}

以上代码将把所有直接位于class为 "container" 的元素内部的 <p></p> 元素的字体加粗。

6. 相邻兄弟选择器（Adjacent Sibling Selector）：

相邻兄弟选择器通过元素的相邻兄弟关系来选择元素。

代码示例：

h1 + p {
  margin-top: 10px;
}

以上代码将把紧接在 <h1></h1> 元素后面的 <p></p> 元素的上外边距设置为 10 像素。

7. 伪类选择器（Pseudo-class Selector）：

伪类选择器通过元素的特定状态来选择元素，例如鼠标悬停、指定位置等。

代码示例：

a:hover {
  color: purple;
}

以上代码将把鼠标悬停在链接上时的文本颜色设置为紫色。

8. 伪元素选择器（Pseudo-element Selector）：

伪元素选择器用于选择元素的特定部分，例如元素的第一个字母、最后一个子元素等。

代码示例：

p::first-letter {
  font-size: 24px;
}

以上代码将把每个 <p></p>

Pemilih Kelas: <p></p>🎜Pemilih kelas memilih elemen melalui atribut kelas mereka. 🎜🎜Contoh kod: 🎜rrreee🎜Kod di atas akan menetapkan saiz fon semua elemen dengan kelas "header" kepada 20 piksel. 🎜
🎜Pemilih ID: 🎜🎜🎜Pemilih ID memilih elemen melalui atribut id mereka. 🎜🎜Contoh kod: 🎜rrreee🎜Kod di atas akan menetapkan lebar elemen dengan id "bekas" kepada 500 piksel. 🎜
🎜Pemilih Keturunan: 🎜🎜🎜Pemilih keturunan memilih elemen melalui perhubungan hierarkinya. 🎜🎜Contoh kod: 🎜rrreee🎜Kod di atas akan menetapkan warna teks semua elemen <p></p> di dalam elemen dengan kelas "bekas" kepada biru. 🎜
🎜Pemilih Kanak-kanak: 🎜🎜🎜Pemilih kanak-kanak memilih elemen melalui perhubungan elemen anak langsung mereka. 🎜🎜Contoh kod: 🎜rrreee🎜Kod di atas akan menjadikan fon tebal bagi semua elemen <p></p> yang terletak terus di dalam elemen dengan kelas "bekas". 🎜
🎜Pemilih Adik Beradik Bersebelahan: 🎜🎜🎜Pemilih Adik Beradik Bersebelahan memilih elemen melalui hubungan adik beradik bersebelahan mereka. 🎜🎜Contoh kod: 🎜rrreee🎜Kod di atas akan menetapkan margin atas elemen <p></p> serta-merta mengikuti elemen <h1></h1> kepada 10 piksel. 🎜
🎜Pemilih kelas pseudo: 🎜🎜🎜Pemilih kelas pseudo memilih elemen melalui keadaan elemen tertentu, seperti tuding tetikus, kedudukan yang ditentukan, dsb. 🎜🎜Contoh Kod: 🎜rrreee🎜Kod di atas akan menetapkan warna teks apabila melayang di atas pautan kepada ungu. 🎜
🎜Pemilih elemen pseudo: 🎜🎜🎜Pemilih elemen pseudo digunakan untuk memilih bahagian tertentu elemen, seperti huruf pertama elemen, elemen anak terakhir, dsb. 🎜🎜Contoh Kod: 🎜rrreee🎜Kod di atas akan menetapkan saiz fon huruf pertama setiap elemen <p></p> kepada 24 piksel. 🎜🎜Di atas ialah beberapa pemilih CSS yang biasa digunakan dan contoh kodnya. Dengan memahami dan menggunakan pemilih ini secara fleksibel, kami boleh mengawal gaya dan struktur elemen halaman web dengan lebih mudah. Harap artikel ini membantu anda! 🎜

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