选择包含特定项目的元素的后续同级

Question

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

考虑下面的HTML，我只能在Z型后，含Z.

.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>

在Y型后不

Answer 1

没有

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

在CSS3下有no parent selector或previous sibling selector。

CSS4提供:has选择在这种情况下，你将能够使用

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

然而，目前，没有任何浏览器都支持这个选择。

---

注：::after“元素”，实际上，一个伪元素，而不是一个选择器，主要用于，定型的目的，用于插入“内容” 内部元件到该::after伪元素附加。

Answer 2

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

您的例子并不表明兄弟姐妹，虽然，只是子元素，在这里不需要特别的选择：.y .z { }