html中nth-child选择器怎么使用

.nav li:nth-child(2) a { color: #ff0000},

这个能让<ul class='nav'>标签里面的第二个li的a标签的颜色变为红色。

:nth-child用倍数比较好用。比如:nth-child(3n),只要是3的倍数的都会被选取（3，6，9...）

:nth-child 不区分子元素的类型，而 :nth-of-type 则区分子元素的类型。

比如说<pre t="code" l="html"><style>

div :nth-child(odd) {background:red}

div :nth-child(even) {background:blue}

</style>

<div>

<h1>第1行</h1>

<p>第2行</p>

<p>第3行</p>

<h2>第4行</h2>

<p>第5行</p>

<h1>第6行</h1>

<h2>第7行</h2>

</div>结果是：第1行红色第2行蓝色第3行红色第4行蓝色第5行红色第6行蓝色第7行红色

如果改为<pre t="code" l="html"><style>

div :nth-of-type(odd) {background:red}

div :nth-of-type(even) {background:blue}

</style>

<div>

<h1>第1行</h1>

<p>第2行</p>

<p>第3行</p>

<h2>第4行</h2>

<p>第5行</p>

<h1>第6行</h1>

<h2>第7行</h2>

</div>则结果是：第1行红色第2行红色第3行蓝色第4行红色第5行红色第6行蓝色第7行蓝色

---