理解 CSS 中的 " " 組合器
CSS 使用 " " 組合器來定位緊接著特定兄弟元素的元素。例如,在規則「h2 p」中,只有緊接在 h2 元素之後的 p 元素才會受到指定樣式的影響。
視覺化概念
考慮以下HTML 程式碼:
<code class="html"><h2>Headline!</h2> <p>The first paragraph.</p> <!-- Selected [1] --> <p>The second paragraph.</p> <!-- Not selected [2] --> <h2>Another headline!</h2> <blockquote class="quote"> <p>A quotation.</p> <!-- Not selected [3] --> </blockquote></code>
應用「h2 p」選擇器時:
[1] 第一段(
)被選中,因為它直接跟隨h2 (
) 未被選中,因為它跟隨第一段,不是 h2 元素。 [3] 不會選擇區塊引用 (
) 內的段落,因為區塊引用中其前面沒有 h2。 與「~」組合器的比較「 」組合器專門只選擇直接兄弟元素,與「~」組合器不同,「~ ”組合器選擇所有兄弟元素,無論其兄弟元素如何位置。例如,「h2 ~ p」將選擇上述 HTML 中的兩個段落,而「h2 p」將只選擇第一段。
以上是CSS 中的「\」組合器如何定位緊接著同級元素之後的元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!