Question

对于与此类似的标记：

<div>
    <p>hello world</p>
</div>
<div>
    <h4>hello world</h4>
</div>

你能在CSS中做这样的事情吗？

div:after {
   content: "";
   display: block;
   border-bottom: 2px solid red;
}
p + div:after {
   content: "";
   display: block;
   border-bottom: 2px solid blue;
}

...意思是说“全部给予：紧跟在<p>蓝色边框之后的伪元素。给所有其他人一个红色边框”。

这doesn't seem to work。我意识到这是因为+符号适用于'div'选择器，而不是'div：after'选择器作为一个整体。但是有没有另一种方法可以在CSS中定位这些（没有添加特定于这些实例的新类并且不需要操作DOM）？

Answer 1

基本上，Michael_B说：

您无法定位伪元素。将伪元素添加到与元素匹配的选择器中。

“目标”是一个模糊的术语，但第二句话就在这里。组合器只使用元素，因为选择器匹配元素，而不是伪元素。你在选择器命名法中真正想做的是设置::after的{{1}}伪元素的样式，其最后一个孩子是div元素（在这种情况下p }框紧跟在格式化树中的::after框之后：

你不能这样做，因为没有父选择器。

我认为选择器4中的<div> <p>hello world</p> div::after  </div> <div> <h4>hello world</h4> div::after  </div>之类的东西会起作用，但这取决于div:has(> p:last-child)::after是否首先使它成为CSS。唯一的另一个好选择是弄清楚这些:has()元素中哪一个有div作为他们的最后一个孩子，并为他们分配一个特殊的类名。

另见：

CSS：加号是否与伪元素一起使用？

1 个答案: