结合 :nth-of-type() 和 :not答案

【问题标题】：Combining :nth-of-type() and :not结合 :nth-of-type() 和 :not
【发布时间】：2012-08-25 16:48:14
【问题描述】：

我有一个奇怪的例子，试图结合两个伪类：:not 和 :nth-of-type() 在非隐藏项目上获得彩虹条纹

有一个:not([selector]):nth-of-type([rule])，我假设css会在应用:nth-of-type规则之前先过滤:not项目，但是以任何顺序排列它们都会得到相同的结果。

这是一个演示这个的 jsfiddle：http://jsfiddle.net/j7hjU/

我在做这些的时候可能忽略了什么吗？

【问题讨论】：

【解决方案1】：

我假设 css 在应用 :nth-of-type 之前会先过滤 :not 项

不。 CSS 是完全声明性的；每个选择器都是一个简单的条件，它独立于任何选择器部分为真或假。它不是一种程序语言，您可以在其中获取一组并对其进行处理，并逐步缩小范围。具有过程规则的选择器语言将不受多种优化的影响，而且速度会更慢。

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

【讨论】：

【解决方案2】：

这似乎是这个问题的重复：Css coloring table problem

答案基本上是否定的，但您可以将一个类应用于可见行以使其工作。

【讨论】：

【解决方案3】：

CSS 从右到左解析。你试过翻转:not和:nth-of-type吗？

【讨论】：