我有以下代码:
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
元素,那么它会按预期工作。为什么呢?
答案 0 :(得分:4)
您遇到的问题是选择器本身::nth-child()
;这会找到它所附加的元素,div
,它是其父级的第n个子节点。
您正在选择:
div:nth-child(1) {
/*...*/
}
这不符合任何事情;因为h1
元素是共享父元素的第一个孩子/ :nth-child(1)
。
要适应,您需要使用:
div:nth-child(2) {
background-color: red;
}
或者创建一个新的父级来封装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>
在支持浏览器时,您还可以使用:nth-of-type(1)
:
div:nth-of-type(1) {
background-color: red;
}
参考文献: