CSS \' \' 組合器如何選擇鄰近的兄弟元素？

相鄰同級選擇：探索CSS ' ' 組合器

在CSS 中， ' ' 字元扮演相鄰同級組合器的角色。這個多功能運算子可讓您指定一個選擇器來定位緊接而來的特定兄弟元素的元素。

為了說明其功能，讓我們剖析以下 CSS 規則：

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

This規則針對直接跟隨「h2」標頭的所有「p」元素。滿足此條件的元素將繼承指定的樣式屬性，例如增加的字體大小、粗體粗細和 #777 顏色。

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

CSS 選擇器「h2 p」將只選擇第一個「p」元素，該元素緊鄰標記為「Headline!」的“h2”標題。這在範例中用“[1]”表示。另一方面，第二個“p”元素前面沒有直接帶有“h2”，因此不會選擇“[2]”。

此外，相鄰同級組合器可以與通用兄弟組合器“~”，允許更靈活的匹配。例如，選擇器“h2 ~ p”將匹配“h2”標頭之後出現的任何“p”元素，無論它是否緊鄰。

本質上，CSS 中的相鄰同級組合器增強了您可以根據 HTML 元素相對於同級元素的位置來精確選擇 HTML 元素，從而可以對樣式和佈局進行細粒度控制。

以上是CSS \' \' 組合器如何選擇鄰近的兄弟元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！