css - 包含特定项的元素的后续兄弟的选择器

Question

是否有一种 css 方法来选择包含 Z 类型元素的元素 Y 类型之后的 X 类型元素？

给定以下 html，我只能在 Z 类型之后，而不是在包含 Z 的 Y 类型之后。

.y .z:after {
  color: green;
  /* x is not green because it's after y, not z */
}

<span class="y">
  y
  <span class "z">
    z
  </span>
</span>
<span class="x">
  x
</span>

Answer 1

没有

因为没有选择 UP DOM 的方法...还。

有，在CSS3下，no parent selector或 previous sibling selector .

CSS4 提供了 :has选择器在这种情况下你可以使用

.y:has( > .z) + .x

但是，目前还没有浏览器支持这个选择器。

---

注意:::after“元素”实际上是一个伪元素，而不是选择器，主要用于插入“内容”的样式目的在 ::after 伪元素附加到的元素内。