Cara menggunakan: pemilih kelas pseudo jenis sahaja untuk memilih gaya CSS yang elemen induknya hanya mempunyai satu elemen daripada jenis yang sama

Cara menggunakan:only-of-type pseudo-class selector untuk memilih gaya CSS yang elemen induknya hanya mempunyai satu elemen daripada jenis yang sama perlu memilih nombor atau bilangan elemen berdasarkan nombor atau Pilih dan gunakan gaya berbeza berdasarkan syarat tertentu. Salah satu pemilih kelas pseudo yang biasa digunakan ialah:only-of-type. Pemilih ini boleh memilih gaya hanya satu elemen daripada jenis yang sama dalam elemen induk. Artikel ini akan memperincikan cara menggunakan pemilih kelas pseudo :only-of-type dan memberikan beberapa contoh kod khusus.

Pertama, mari kita fahami sintaks asas pemilih kelas pseudo jenis sahaja. Pemilih ini menggunakan elemen induk untuk memilih gaya untuk hanya satu elemen daripada jenis yang sama. Sintaksnya adalah seperti berikut:

父元素:only-of-type {
  /* CSS样式 */
}

Dalam kod di atas, elemen induk ialah elemen induk langsung bagi elemen yang akan dipilih Apabila terdapat hanya satu elemen daripada jenis yang sama, gaya yang ditentukan akan digunakan.

Di bawah, kami akan menunjukkan cara menggunakan pemilih kelas pseudo :hanya-daripada-jenis melalui beberapa contoh khusus. Katakan kita mempunyai sekeping kod HTML seperti berikut:

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
</div>
<div>
  <p>第四个段落</p>
  <p>第五个段落</p>
</div>

Contoh 1: Pilih div dengan hanya satu elemen p

Jika kita ingin memilih div dengan hanya satu elemen p dan menetapkan warna latar belakangnya kepada merah, kita boleh menggunakan kod berikut:

div:only-of-type {
  background-color: red;
}

Contoh 2: Pilih elemen p dalam div dengan hanya satu elemen p

Jika kita ingin memilih elemen p dalam div dengan hanya satu elemen p dan menetapkan warna teksnya kepada biru, kita boleh menggunakan kod berikut :

div:only-of-type p {
  color: blue;
}

Contoh 3 : Pilih elemen induk dengan hanya satu elemen span

Jika kita mempunyai sekeping kod HTML seperti berikut:

<div>
  <span>第一个span</span>
</div>
<div>
  <span>第二个span</span>
  <span>第三个span</span>
</div>

Kami ingin memilih elemen induk dengan hanya satu elemen span dan menetapkan warna sempadannya kepada hijau , kita boleh menggunakan kod berikut:

div span:only-of-type {
  border: 1px solid green;
}

Oleh Dalam kod di atas, kita menetapkan warna sempadan unsur induk dengan hanya satu elemen rentang kepada hijau.

Ringkasan:

Dengan menggunakan pemilih kelas pseudo :only-of-type, kita boleh memilih gaya hanya satu elemen daripada jenis yang sama dalam elemen induk. Dalam proses pembangunan sebenar, gaya CSS yang berbeza dipilih mengikut keperluan sebenar untuk mengoptimumkan reka bentuk halaman. Dengan contoh kod konkrit yang disediakan dalam artikel ini, anda boleh lebih memahami cara menggunakan pemilih kelas pseudo :only-of-type.

Saya harap artikel ini membantu anda dan saya doakan anda berjaya dalam reka bentuk halaman anda!

Atas ialah kandungan terperinci Cara menggunakan: pemilih kelas pseudo jenis sahaja untuk memilih gaya CSS yang elemen induknya hanya mempunyai satu elemen daripada jenis yang sama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!