#书摘 #css #前端
《CSS 选择器世界》nth-child()的参数索引特性
对于nth-child()、nth-last-child() 以及8.4.3节要介绍的 nth-of-type()、nth-last-of-type()，还有一种大家可能没见过的语法，就是使用 of 关键字配合特性的CSS选择器，对已经匹配的树结构元素进行进一步的匹配。例如，有如下HTML结构和CSS代码：


<dl>
<dt>标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
<dt>标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
<dt>标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
</dl>
dl > :nth-child(even of dd) {
color: red;
font-weight: bold;
}​​


表示匹配所有子元素集合中的偶数项的 <dd> 元素。

顺便提一下，选择器:nth-child(even of dd)和选择器dd:nth-child(even)是不一样的，even关键字是相对整个子元素而言的，而不是仅相对于 <dd> 元素。

另外，of后面的选择器除了标签选择器，类名选择器、属性选择器都是支持的，可以让子元素的匹配更加精准可控。可惜这个特性目前仅被Safari浏览器支持，Chrome等浏览器暂时没有支持的迹象，因此，大家先了解即可。

https://memo.cosine.ren/m/353