CSS of <selector>

:nth-child(an+b) 伪类允许我们通过表达式 an+b 对元素集合进行匹配，集合元素从 1 开始排序，n 从 0 开始取值进行匹配，最常见的表达式 2n+0 和 2n+1 可以使用 even 和 odd 关键字，分别匹配偶数和奇数项。

很容易理解对吧，但如果是下面这种情况，.hidden 元素的相邻元素是什么颜色呢？


<div class='item'>item</div>
<div class='item'>item</div>
<div class='item'>item</div>
<div class='item'>item</div>
<div class='item'>item</div>
<div class='item hidden'>hidden item</div>
<div class='item'>item</div>


.item {
	background: indigo;
	margin: 0.4em;
	color: white;
	padding: 0.4em;
}

.item:not(.hidden):nth-child(odd) {
	background: red;
}

答案是都是红色，:not(.hidden) 并没有将 .hidden 元素从 :nth-child(odd) 的集合中排除掉，当 .hidden 元素不显示时，所有元素也不会呈现条纹状。

想要修复上面的问题，可以使用 of 关键字（提案文档），浏览器支持度可以去这里查看。


.item:nth-child(odd of :not(.hidden)) {
	background: red;
}

现在即使 .hidden 元素不显示，所有元素依然可以呈现条纹状。

自己试一试：

css-of-selector