Apakah fungsi utama pemilih CSS3?

Pemilih CSS3 digunakan untuk mencari dan memilih elemen dalam dokumen HTML untuk menukar gaya mereka atau menggunakan operasi lain. Pemilih CSS3 membenarkan pembangun memilih elemen berdasarkan nama teg, nama kelas, ID, atribut atau perhubungan mereka, membolehkan pembangun mengawal gaya halaman dengan lebih fleksibel.

Yang berikut akan memperkenalkan beberapa pemilih CSS3 biasa dan contoh kod khusus yang sepadan.

1. Pemilih Teg
   Pemilih teg ialah salah satu pemilih paling asas dan biasa digunakan dalam CSS. Elemen yang sepadan boleh dipilih dengan menyatakan nama tagnya. Contohnya adalah seperti berikut:

p {
  color: red;
}

Kod di atas bermaksud memilih semua elemen <p></p> dalam dokumen dan menetapkan warna teksnya kepada merah. <p></p>元素，并将其文字颜色设置为红色。

2. 类选择器
   类选择器通过指定类名来选取元素。在HTML文档中，可以通过为元素添加class属性来定义类名，并在CSS中使用.类名的方式来选取元素。示例如下：

HTML:

<p class="highlight">这是一个有着highlight类的段落。</p>

CSS:

.highlight {
  background-color: yellow;
}

上述代码表示选择具有highlight类的元素，并将其背景色设置为黄色。

3. ID选择器
   ID选择器是通过指定ID来选取元素。在HTML文档中，可以通过为元素添加id属性来定义ID，并在CSS中使用#ID的方式来选取元素。示例如下：

HTML:

<p id="intro">这是一个拥有intro ID的段落。</p>

CSS:

#intro {
  font-weight: bold;
}

上述代码表示选择具有intro ID的元素，并将其文字设置为粗体。

4. 属性选择器
   属性选择器允许开发者根据元素的属性值来选取元素。常用的属性选择器有：等于选择器、开始选择器、结束选择器和包含选择器等。示例如下：

等于选择器：选取具有指定属性值的元素。

input[type="text"] {
  background-color: lightblue;
}

上述代码表示选择所有type属性为text的<input>元素，并将其背景色设置为浅蓝色。

5. 关系选择器
   关系选择器可以根据元素之间的关系来选取元素。常见的关系选择器有后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器等。示例如下：

后代选择器：选取某个元素的后代元素。

div p {
  font-style: italic;
}

上述代码表示选择所有在

元素内的<p></p>

Pemilih kelas

Pemilih kelas memilih elemen dengan menyatakan nama kelas. Dalam dokumen HTML, anda boleh mentakrifkan nama kelas dengan menambahkan atribut class pada elemen dan gunakan .classname untuk memilih elemen dalam CSS. Contohnya adalah seperti berikut:

🎜🎜HTML:🎜rrreee🎜CSS:🎜rrreee🎜Kod di atas bermaksud memilih elemen dengan kelas highlight dan menetapkan warna latar belakangnya kepada kuning. 🎜
🎜Pemilih ID🎜Pemilih ID memilih elemen dengan menyatakan ID. Dalam dokumen HTML, anda boleh mentakrifkan ID dengan menambahkan atribut id pada elemen dan menggunakan #ID dalam CSS untuk memilih elemen. Contohnya adalah seperti berikut: 🎜🎜🎜HTML:🎜rrreee🎜CSS:🎜rrreee🎜Kod di atas bermaksud memilih elemen dengan ID intro dan menetapkan teksnya kepada tebal. 🎜
🎜Pemilih atribut🎜Pemilih atribut membenarkan pembangun memilih elemen berdasarkan nilai atributnya. Pemilih atribut yang biasa digunakan termasuk: pemilih sama, pemilih mula, pemilih tamat dan mengandungi pemilih. Contohnya adalah seperti berikut: 🎜🎜🎜Pemilih sama: Memilih elemen dengan nilai atribut yang ditentukan. 🎜rrreee🎜Kod di atas menunjukkan bahawa semua atribut type dipilih sebagai text <input> dan warna latar belakangnya ditetapkan kepada biru muda . 🎜
🎜Pemilih perhubungan🎜Pemilih perhubungan boleh memilih elemen berdasarkan perhubungan antara elemen. Pemilih perhubungan biasa termasuk pemilih keturunan, pemilih elemen anak, pemilih adik beradik bersebelahan dan pemilih adik beradik sejagat. Contohnya adalah seperti berikut: 🎜🎜🎜Pemilih keturunan: Pilih unsur keturunan unsur. 🎜rrreee🎜Kod di atas bermaksud memilih semua elemen <p></p> dalam elemen <div> dan menetapkan gaya teksnya kepada italik. 🎜🎜Di atas hanyalah sebahagian daripada pemilih CSS3, terdapat banyak pemilih lain yang boleh digunakan untuk memilih elemen. Dengan menggunakan pemilih CSS3 secara fleksibel, pembangun boleh mengawal dan menyesuaikan gaya halaman dengan lebih baik dan meningkatkan pengalaman pengguna. 🎜</div>

Atas ialah kandungan terperinci Apakah fungsi utama pemilih CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!