用于包含特定项目的元素的后续兄弟的选择器

Question

是否有一种css方法可以选择X类型的元素，这些元素位于包含Z类型元素的元素Y类型之后？

鉴于以下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的方法...... 还。

CSS3下有no parent selector或previous sibling selector。

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

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

但是，目前没有浏览器支持此选择器。

注意：::after＆＃39;元素＆＃39;实际上，它是一个伪元素，而不是一个选择器，主要用于插入＆＃34;内容的样式目的。 内部 ::after伪元素附加到的元素。

Answer 2

有两个兄弟选择器+和~。前者适用于兄弟姐妹之前的兄弟姐妹，后者适用于兄弟姐妹之前的某个地方。

您的示例不会显示兄弟元素，只是子元素，不需要特殊选择器：.y .z { }