是 :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'> </div>

Answer 1

由于sibling combinators only represent element siblings，伪元素不能被兄弟组合子作为目标，而不是伪元素兄弟。

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

当元素的::before 伪元素悬停时，无法编写选择器样式化元素的::before 伪元素。 （就此而言，::after:hover 在 Selectors 4 之外也是无效的，并且不存在任何实现。）有 hacks 使用像 pointer-events 这样的东西，但不能保证在所有浏览器上都可以工作。