怎么做:n-child工作?

时间:2012-10-14 17:44:20

标签: html css css3 css-selectors

我有以下代码:

div:nth-child(1) {
    background-color: red;  
}
<h1>Boxes</h1>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

我希望选择内容为div的{​​{1}},但事实并非如此。但是,如果我删除了1st元素,那么它会按预期工作。为什么呢?

1 个答案:

答案 0 :(得分:4)

您遇到的问题是选择器本身::nth-child();这会找到它所附加的元素,div,它是其父级的第n个子节点。

您正在选择:

div:nth-child(1) {
 /*...*/
}

这不符合任何事情;因为h1元素是共享父元素的第一个孩子/ :nth-child(1)

要适应,您需要使用:

div:nth-child(2) {
    background-color: red;  
}

JS Fiddle demo

或者创建一个新的父级来封装div元素。

<h1>Boxes</h1>
<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

JS Fiddle demo

在支持浏览器时,您还可以使用:nth-of-type(1)

div:nth-of-type(1) {
    background-color: red;  
}​

JS Fiddle demo

参考文献: