问CSS选择后面的下一个元素

EN

同级选择器实际上在那里工作正常。问题是，第一条规则p span.test { background-color: yellow; }的目标是“在test p**"**.内具有p span.test { background-color: yellow; }test的任何是span变黄了，而不是p。

第二个p不是跨度的同级-- p只是另一个跨度的同级。因此，该规则不适用于它。

不幸的是，there is no CSS "parent" selector，所以你不能轻易地逆转这一点。相反，您必须在至少一个p上放置一个类，如下所示：

​

p span.test { background-color: yellow; }
p.first + p { background-color: red; }

<p class="first">
    <span class="test">Foo</span>
</p>

<p>Foo 2</p>

​

相邻的同级组合符(+)分隔两个选择器，仅当第二个元素紧跟在第一个元素之后，并且这两个元素都是同一父元素的子元素时，才匹配第二个元素。

在您的代码中，两个<p>标签是同一父标签的子标签。但是<span>是<p>标签的子标签。因此，如果我们考虑“<p>”类和下一个测试标记，它们不是同一父元素的子元素。这就是你的代码不能工作的原因。

正确的语法是：

former_element + target_element { style properties }

因此，您的代码应按如下方式更改：

    <style>
        p span.test { background-color: yellow; }
        p + p { background-color: red; }
    </style>

这可以很好地工作。