Css 如何在活动元素之前和之后选择某个类的所有同级选择器？

我还没有找到答案，所以这里说：

我在页面上有4个div。当一个div为：active时，我希望所有其他div采用

opacity:0

是否有人想出了一种方法来选择所有同级，而不仅仅是
：active
元素后面的同级

<div class="circle c1"> </div>
<div class="circle c2"> </div>
<div class="circle c3"> </div>
<div class="circle c4"> </div>

<style type="text/css">

    .c2:active ~.circle {
        opacity: 0;
    }
</style>


.c2：活动~.圈{
不透明度：0；
}

在本例中，.c1 div永远不会消失。什么是只使用CSS的解决方案？
这有点可能，但不是很奇妙，顺便说一句，我使用的是
：hover
而不是
：active
：

.circle {
    opacity: 1;
    width: 48%;
    margin: 0;
    display: inline-block;
    border: 1px solid #000;
    height: 10em;
}

body:hover .circle {
    opacity: 0.4; /* obviously adjust to 0, but used 0.4 for the demonstration */
}

body:hover .circle:hover {
    opacity: 1;
}


它的工作原理是，根据共享父元素的
：hover
（
示例代码中的body
），选择所有要设置为
opacity:0
样式的元素，然后选择当前悬停的
div
来覆盖该样式

在演示中，我使用了
：hover
，但如果您愿意，可以使用
：active
，但我不确定您希望用它实现什么。不过，这是一个概念证明。
您可以只选择给定元素后面的同级。至少只使用CSS。你真的是说
：active
状态而不是
：hover
？试试类似
.c2:active~。圆圈：第n个孩子（n）
@Morpheus:
：第n个孩子（n）
在这里实际上是无用的，因为它不会改变哪些元素匹配（哪些不匹配）。谢谢David。这可能有用。我将只为圆圈创建一个父元素，并在其上使用：鼠标悬停，而不是主体。由于IE存在问题，这可能不适用于
：active
（例如，请参见注释中的其他链接）。基本上，
body:active。circle:active
在IE中不起作用，因为当孩子处于活动状态时，家长不被认为是活动的。谢谢Scott。我真的需要：停下来。我以前见过：活跃的IE bug，甚至最近也见过。再次感谢。