CSS：选择下一个元素，它被包装在一个跨度中

我有这样一个问题。我的标记：

<span>
    <i class="rectangle"></i>
</span>
<span>
    <i class="circle"></i>
</span>

我需要选择

span.rectangle

后面的

span.circle

。 我不知道怎么做。选择器

span>.rectangle+span>.circle

不起作用。

---

实际上你不能。在css中，您可以进入或进入下一个，但不能进入上一个

尝试寻找其他方法。若你们说出了最初的问题，那个么可能存在某种解决方案。

像这样

我{
显示：内联块；
宽度：50px；
高度：50px；
背景色：红色；
}
.圆圈{
边界半径：50%；
}
span+span i{
背景颜色：绿色；
}

---

（如果我理解正确的话）

Css不能像上面解释的那样选择父元素 我建议把这样的容器放进去

<span class="rectangle-container">
    <i class="rectangle"></i>
</span>
<span class="circle-container">
   <i class="circle"></i>
</span>

---

有一个建议的

：has（）

选择器，但还没有被任何浏览器支持。@MuhammadUsman，它还在吗？据我所知，在

css3

中无法选择

父项。在初稿阶段，您应该使用
javascript
或
jQuery
@Qwertiy Yes。勾选“否”，他要求
span:has（.rectangle）+span.circle
-如果看他们的父跨度，则矩形后面的圆圈。好的，明白了，他想在具体程度上提高一级。是的，我同意，不可能。
<span class="rectangle-container">
    <i class="rectangle"></i>
</span>
<span class="circle-container">
   <i class="circle"></i>
</span>

i {
 display: inline-block;
 width: 50px;
 height: 50px;
 background-color: red;
}
.circle {
 border-radius: 50%;
}

.rectangle-container + .circle-container .circle {
  background-color: green;
}