css - 是:before :after siblings?

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 ，而不是伪元素 sibling 。

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

当它的 ::after 伪元素悬停时，不可能编写选择器样式元素的 ::before 伪元素。 (就此而言，::after:hover 在 Selectors 4 之外也无效，并且不存在任何实现。)hacks它利用了诸如 pointer-events 之类的东西，但并不能保证在所有浏览器上都能正常工作。