使用相邻的兄弟选择器选择伪元素

Question

我有一个元素，可以通过使用JS的切换按钮添加--active类。

<div class="container">
  <div class="element element--active"></div>
  ::after
</div>

添加此类后，我希望::after元素为display:none;

以下内容不起作用，

.element--active + ::after {
  display: none;
}

但为什么会这样？

我的替代方法是在添加element--active时向容器添加另一个类吗？

Answer 1

.element--active + ::after与.element--active + *::after

相同

因此它找到一个元素，它是element--active类的成员。然后它找到了它的相邻兄弟。它没有。所以它停止了。

如果您想在.element--active之后使用伪元素，那么您只需使用.element--active::after。

如果你想在.container之后使用伪元素，那么你就会被卡住，因为CSS没有父选择器。

Answer 2

这不起作用，因为::after是.container的伪元素。由于您无法在CSS中选择父级，因此解决方案可能是将类添加到.container，然后删除::after元素。