Bagaimanakah Tanda Tambah ( ) Berfungsi dalam Penggabung Adik Bersebelahan CSS?

Kombinator Adik Beradik Bersebelahan CSS: Memahami Tanda Tambah

Dalam CSS, tanda tambah ( ) digunakan sebagai penggabung adik beradik bersebelahan. Ini bermakna ia memilih elemen yang serta-merta mengikut elemen tertentu.

Contoh:

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

Dalam peraturan ini, pemilih h2 p menyasarkan semua elemen p yang datang terus selepas elemen h2.

Cara Ia Berfungsi:

Penggabung adik beradik bersebelahan memastikan elemen yang dipilih:

• Mengikut elemen sebelumnya serta-merta tanpa sebarang unsur campur tangan.
• Berkongsi elemen induk yang sama.

Ilustrasi:

Pertimbangkan struktur HTML berikut:

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

Keputusan:

• Dipilih: Elemen p pertama kerana ia secara langsung mengikut elemen h2.
• Tidak dipilih: Elemen p kedua kerana ia tidak serta-merta mengikut elemen h2.
• Tidak dipilih: Elemen p dalam petikan blok kerana elemen h2 tidak' t mendahuluinya dalam petikan blok.

Penggunaan:

Penggabung adik beradik bersebelahan berguna untuk menggayakan jujukan elemen tertentu dalam dokumen, contohnya:

• Memberikan perenggan yang berbeza secara visual mengikut tajuk.
• Menekankan baris ganti dalam jadual.
• Membuat menu lungsur yang bersebelahan dengan pautan navigasi.

Atas ialah kandungan terperinci Bagaimanakah Tanda Tambah ( ) Berfungsi dalam Penggabung Adik Bersebelahan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!