如何選擇給定元素之前的元素：理解 CSS 中的“ ”（加號）和“~”（波浪線）相鄰同級選擇器？

相鄰同級選擇者：了解div p（加號）和div ~ p（波浪線）之間的差異

使用CSS 選擇器時，掌握div p（加號）和div ~ p（波形符）選擇器之間的差異至關重要。雖然它們聽起來很相似，但它們的意義卻截然不同。

div p（加號）選擇器

div p 選擇器選擇所有

。緊接著放置在

之後的元素元素。這意味著

元素必須是前面的

的直接同級元素。

div ~ p（波形符）選擇器

與 div p 選擇器不同，div ~ p 選擇器選擇所有

元素。前面帶有

的元素元素。這不僅包括直接兄弟姐妹，還包括任何其他

。任何

之後的元素文檔樹中的元素。

選擇正確的選擇器

要解決有關選擇緊鄰給定元素之前的元素的查詢，應使用以下語法：

E1 E2

此選擇器符合緊接而來的元素E1 的元素E2。在您的情況下，您將使用div p 來選擇

相鄰且位於

之前的元素

範例

考慮以下HTML 和CSS程式碼：

<code class="html"><div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div></code>

<code class="css">ul + p {
    color: red;
}</code>

在此範例中，僅

前面的元素元素將有紅色文字。這是因為 ul p 選擇器僅匹配直接兄弟。

以上是如何選擇給定元素之前的元素：理解 CSS 中的“ ”（加號）和“~”（波浪線）相鄰同級選擇器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！