如何选择给定元素之前的元素：理解 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中文网其他相关文章！