:before :after 是兄弟姐妹吗？

Question

问题的目的是调查做类似事情的可能性：

.element:before {
  content: 'before';
  color: orange;
}

.element:after {
  content: 'after';
  color: green;
}

.element:after:hover + .element:before {
  color: red;
}

<div class='element'>&nbsp;</div>

Answer 1

伪元素不能作为兄弟组合器的目标，因为 sibling combinators only represent element siblings，而不是伪元素兄弟。

因此，尽管 ::before 和 ::after 生成的框在布局方面是彼此的兄弟，但就兄弟组合器而言，它们不是。

当 ::after 伪元素悬停时，无法编写选择器样式元素的 ::before 伪元素。（就此而言，::after:hover 在 Selectors 4 之外也无效，并且不存在任何实现。）有 hacks 使用 pointer-events 之类的东西，但没有任何保证适用于所有浏览器。

:before :after 是兄弟姐妹吗？

Are :before :after siblings?

css

css-selectors

pseudo-element