Bagaimana Penggabungan Adik Beradik Bersebelahan CSS ( ) Berfungsi?

Memahami CSS Adjacent Sibling Combinator:

Dalam CSS, simbol dikenali sebagai adjacent sibling combinator. Ia membolehkan anda menyasarkan elemen HTML tertentu yang diposisikan bersebelahan antara satu sama lain.

Bagaimana Penggabungan Berfungsi?

Penggabung memastikan bahawa elemen yang disasarkan (yang kedua elemen dalam pemilih) mesti mengikut elemen pertama (elemen pertama dalam pemilih) dengan segera. Seharusnya tiada unsur lain di antara dua elemen untuk dipadankan oleh pemilih.

Contoh: h2 p

Pertimbangkan peraturan CSS berikut:

<code class="css">h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}</code>

Peraturan ini menyasarkan semua elemen p yang bersebelahan dengan elemen h2. Dalam erti kata lain, ia hanya akan menjejaskan elemen p yang muncul serta-merta selepas elemen h2.

Ilustrasi

Ambil kod HTML ini sebagai contoh:

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

<h2>Another headline!</h2>
<blockquote>
    <p>A quotation.</p> <!-- Not selected -->
</blockquote></code>

Hanya elemen p pertama akan dipilih oleh pemilih h2 p kerana ia bersebelahan dengan h2. Elemen p kedua tidak dipilih kerana ia dipisahkan daripada h2 oleh

. Elemen p dalam petikan blok juga tidak dipilih kerana tiada elemen h2 serta-merta mendahuluinya dalam blok yang sama.

Perbezaan daripada Penggabung Adik Beradik Umum ~

Tidak seperti the combinator, the general sibling combinator ~ tidak memerlukan penempatan bersebelahan. Ia memilih elemen yang merupakan adik beradik, tanpa mengira kedudukan mereka dalam hubungan antara satu sama lain.

Atas ialah kandungan terperinci Bagaimana Penggabungan Adik Beradik Bersebelahan CSS ( ) Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!