CSS 相鄰同級組合器 ( ) 如何運作？

了解 CSS 相鄰同級組合器：

在 CSS 中，該符號稱為相鄰同級組合器。它允許您定位彼此相鄰的特定 HTML 元素。

組合器如何運作？

組合器確保目標元素（第二個選擇器中的第一個元素）必須緊接在第一個元素（選擇器中的第一個元素）之後。選擇器匹配的兩個元素之間不應有其他元素。

範例：h2 p

考慮以下 CSS 規則：

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

此規則針對與 h2 元素相鄰的所有 p 元素。換句話說，它只會影響緊接在 h2 元素之後出現的 p 元素。

說明

以以下HTML 程式碼為例：

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

h2 p 選擇器只會選擇第一個p 元素，因為它與h2 相鄰。第二個 p 元素未被選擇，因為它透過

與 h2 分開。區塊引用中的 p 元素也不會被選擇，因為在同一塊中沒有緊鄰其前面的 h2 元素。

與一般兄弟組合器的區別 ~

與組合器，一般兄弟組合器~不需要相鄰放置。它選擇兄弟元素，無論它們之間的相對位置如何。

以上是CSS 相鄰同級組合器 ( ) 如何運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！