Question

如何将特定的CSS样式应用于一组元素中的每个（为了参数）奇数元素，同时考虑一组被排除的元素？

此问题在此复制（显示在codepen中）：

应用了类.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>

当应用.bar类时，该元素将被隐藏。

我希望将应用了.foo的剩余元素设置为奇数/偶数。

尝试如下：

.bar {
    display: none;
}

/**
 * This clearly doesn't work as I'd hoped it would.
 */
.foo:not(.bar):nth-of-type(even) {
    color: green;
}

理想情况下，我希望第七个元素是绿色的，即使它是一个“奇数”元素，如果我能够用类.bar排除元素那么它将是第四个元素，因此被认为是“均匀”，将颜色设置为绿色。

这可以用CSS吗？

Answer 1

不幸的是不可能。以前在这里回答：https://stackoverflow.com/a/12205844/1590962

CSS是完全声明的;每个选择器都是一个简单的条件，它是真或假的，与任何选择器部分无关。它不是一种过程语言，你可以使用它来处理它并逐步缩小它。具有程序规则的选择器语言可以免于多种优化，并且速度会慢一些。

因此，nth-of-type只是关于元素父级中的位置，而不是位于“结果列表”中的位置，因为CSS选择器没有这样的概念。选择器引擎可以查找第n个类型的测试，然后再将其缩小，因为规则不会相互干扰。

Answer 2

正如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++;
}

如何在考虑被排除的类的同时将奇数/偶数样式应用于元素？

2 个答案: