CSS: 加号是否适用于伪元素？

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;
}

...意思是说 "Give all :after pseudo elements immediately following a <p> a blue border. Give all others a red border".

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

Answer 1

基本上，Michael_B 说的是：

You can't target a pseudo-element. A pseudo-element is added to a selector that has matched an element.

"Target" 是一个含糊的术语，但第二句在这里很重要。组合器只适用于元素，因为选择器匹配元素，而不是伪元素。在选择器命名法中，您真正想做的是为 div 的 ::after 伪元素设置样式，其最后一个子元素是 p 元素（在这种情况下 ::after 框紧跟在格式树中的 p 框之后）：

<div>
    <p>hello world</p>
    div::after <!-- Blue border -->
</div>
<div>
    <h4>hello world</h4>
    div::after <!-- Red border -->
</div>

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

我想像 Selectors 4 中的 div:has(> p:last-child)::after 这样的东西会起作用，但这取决于 :has() 是否首先进入 CSS。唯一另一个好的选择是找出这些 div 元素中哪些元素的最后一个子元素是 p，并为它们分配一个特殊的 class 名称。

另请参阅：

Can I target a :before or :after pseudo-element with a sibling combinator?
Is there a CSS parent selector?

CSS: 加号是否适用于伪元素？

CSS: Does the plus sign work with pseudo elements?

css

css-selectors

pseudo-element