Bagaimanakah Penggabungan \" \" dalam Elemen Sasaran CSS Serta-merta Mengikuti Adik Beradik?

Memahami " " Combinator dalam CSS

CSS menggunakan " " combinator untuk menyasarkan elemen yang mengikuti adik beradik tertentu. Contohnya, dalam peraturan "h2 p", hanya elemen p sejurus selepas elemen h2 akan dipengaruhi oleh gaya yang ditentukan.

Memvisualisasikan Konsep

Pertimbangkan kod HTML berikut:

<code class="html"><h2>Headline!</h2>
<p>The first paragraph.</p> <!-- Selected [1] -->
<p>The second paragraph.</p> <!-- Not selected [2] -->

<h2>Another headline!</h2>
<blockquote class="quote">
    <p>A quotation.</p> <!-- Not selected [3] -->
</blockquote></code>

Apabila menggunakan pemilih "h2 p":

• [1] Perenggan pertama (

  ) dipilih kerana ia mengikuti secara langsung elemen h2 (

  ).

• [2] Perenggan kedua (

  ) tidak dipilih kerana ia mengikut perenggan pertama, bukan elemen h2.

• [3] Perenggan dalam petikan blok () tidak dipilih kerana tiada h2 mendahuluinya dalam petikan blok.

Perbandingan dengan Penggabung "~"

Penggabung " " secara khusus memilih hanya elemen yang merupakan adik-beradik terdekat, tidak seperti penggabung "~" yang memilih semua elemen adik-beradik, tanpa mengira elemen mereka kedudukan. Contohnya, "h2 ~ p" akan memilih kedua-dua perenggan dalam HTML di atas, manakala "h2 p" akan memilih hanya perenggan pertama.

Atas ialah kandungan terperinci Bagaimanakah Penggabungan \" \" dalam Elemen Sasaran CSS Serta-merta Mengikuti Adik Beradik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!