Bagaimanakah penggabung CSS \' \' memilih elemen adik beradik bersebelahan?

Pemilihan Adik Beradik Bersebelahan: Meneroka Kombinator CSS ' '

Dalam CSS, watak ' ' mengambil peranan sebagai penggabung adik beradik bersebelahan . Pengendali serba boleh ini membolehkan anda menentukan pemilih untuk menyasarkan elemen yang didahului dengan serta-merta oleh elemen adik beradik tertentu.

Untuk menggambarkan kefungsiannya, mari kita rungkai peraturan CSS berikut:

h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}

Ini peraturan menyasarkan semua elemen 'p' yang secara langsung mengikuti pengepala 'h2'. Elemen yang memenuhi syarat ini akan mewarisi sifat penggayaan yang ditentukan, seperti saiz fon yang diperbesar, berat tebal dan warna #777.

Pertimbangkan struktur HTML berikut sebagai contoh:

<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>

Pemilih CSS 'h2 p' hanya akan memilih elemen 'p' pertama, yang bersebelahan dengan pengepala 'h2' yang berlabel "Headline!". Ini dilambangkan dengan '[1]' dalam contoh. Unsur 'p' kedua, sebaliknya, tidak didahului secara langsung oleh 'h2' dan oleh itu tidak dipilih '[2]'.

Selain itu, penggabung adik beradik bersebelahan boleh digunakan bersama dengan penggabung bersaudara am '~', yang membolehkan padanan yang lebih fleksibel. Sebagai contoh, pemilih 'h2 ~ p' akan memadankan mana-mana elemen 'p' yang berlaku selepas pengepala 'h2', tidak kira sama ada ia bersebelahan serta-merta.

Pada dasarnya, penggabung saudara bersebelahan dalam CSS memperkasakan anda untuk memilih elemen HTML dengan tepat berdasarkan kedudukannya berbanding dengan adik-beradik mereka, membenarkan kawalan terperinci ke atas penggayaan dan reka letak.

Atas ialah kandungan terperinci Bagaimanakah penggabung CSS \' \' memilih elemen adik beradik bersebelahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!