加號 ( ) 在 CSS 相鄰同級組合器中如何運作？-css教學-PHP中文網

加號 ( ) 在 CSS 相鄰同級組合器中如何運作？

Susan Sarandon

發布： 2024-11-01 04:43:01

原創

287 人瀏覽過

How Does the Plus Sign ( ) Work in CSS Adjacent Sibling Combinator?

CSS 相鄰同級組合器：了解加號

在CSS 中，加號( ) 用作相鄰同級組合器。這意味著它選擇緊跟特定元素之後的元素。

範例：

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

登入後複製

在此規則中，h2 p 選擇器針對直接出現的所有 p 元素在 h2 元素之後。

工作原理：

相鄰同級組合器確保所選元素：

跟隨前面的元素立即執行，無需任何中間元素。
共享相同的父元素。

插圖：

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

登入後複製

結果：

結果：
選定： 第一個p 元素，因為它直接跟隨h2 元素。
未選擇： 第二個 p 元素，因為它不會立即跟隨 h2 元素。

未選擇： 區塊引用中的 p 元素，因為 h2 元素不' t 在區塊引用中位於它之前。

用法：

相鄰同級組合器對於設計文件中特定元素序列的樣式很有用，例如：
渲染標題後面的視覺上不同的段落。

強調表格中的交替行。建立與導航連結相鄰的下拉式選單。

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