Css 如何将奇偶样式应用于元素，同时考虑排除的类？

在考虑一组排除的元素时，如何将特定的css样式应用于一组元素中的每个（为了论证）奇数元素

此问题在此处复制（以代码笔显示）：

应用了类

.foo

的一系列元素：

<a href="#" class="foo">1. Blue</a>
<a href="#" class="foo">2. Green</a>
<a href="#" class="foo">3. Blue</a>
<a href="#" class="foo bar">4. Hidden (blue)</a>
<a href="#" class="foo bar">5. Hidden (blue)</a>
<a href="#" class="foo bar">6. Hidden (blue)</a>
<a href="#" class="foo">7. Green</a>

理想情况下，我希望第七个元素是绿色的，即使它是“奇数”元素，如果我能够用class

.bar

排除元素，那么它将是第四个元素，因此被认为是“偶数”，将颜色设置为绿色

---

CSS可以做到这一点吗？

不幸的是，这不可能。先前的答复如下：

CSS是完全声明性的；每个选择器都是一个简单的条件，它独立于任何选择器部分而为真或假。它不是一种过程性语言，你需要一个集合并处理它，每一步都要缩小它的范围。带有过程规则的选择器语言将不受多种优化的影响，并且速度较慢

所以第n个类型只是关于元素在父元素中的位置，而不是“到目前为止的结果列表”中的位置，因为CSS选择器没有这样的概念。选择器引擎可以在使用not缩小测试范围之前查找第n个类型的测试，因为规则不会相互干扰

---

正如Hephistocles所说，只有css是没有办法做到这一点的。另一方面，使用javascript非常简单：

var list = document.getElementsByClassName('foo');
var x=0;
for(i=0;i<list.length; i++){
    if(x%2==1) list[i].style.color='green';
    if(list[i].className.indexOf("bar")==-1) x++;
}

var list=document.getElementsByClassName（'foo'）；
var x=0；
对于（i=0；我很高兴接受这个答案，谢谢。还发现CSS4选择器将解决此问题：如果以前在其他地方回答过问题，则应将该问题标记为重复问题。这样可以省去复制答案并链接回该答案的麻烦。我下次会这样做！（我之前找不到标志按钮…）
var list = document.getElementsByClassName('foo');
var x=0;
for(i=0;i<list.length; i++){
    if(x%2==1) list[i].style.color='green';
    if(list[i].className.indexOf("bar")==-1) x++;
}