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

Question

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

此问题在此处复制(显示在codepen中):

http://codepen.io/houdmont/pen/VLOBBG

.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

不幸的是不可能。以前在这里回答过：/sf/answers/854409111/

CSS 是完全声明性的；每个选择器都是一个简单的条件，其真或假与任何选择器部分无关。它不是一种过程式语言，您需要获取一组并处理它，并通过每一步缩小它的范围。具有过程规则的选择器语言将不受多种优化的影响，并且速度会更慢。

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