nth-child()
来源：2-1 position-static
Jin66
2020-03-29 20:25:57
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
p:nth-child(3n+1){
background-color: #A52A2A;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p>段落四</p>
<p>段落五</p>
<p>段落六</p>
<p>段落七</p>
<p>段落八</p>
<p>段落九</p>
</body>
</html>这里的p:nth-child(3n+1)就是说n是计算器1就是他开始计算的值每隔3个元素就是一周开始计算如果父元素下面的子元素符合的话就会变颜色如果不要后面的+1的话起始位置就是从n0开始是这个意思吗老师
还有就是老师，还是没搞懂为啥h1也会同时被选中，我把p换成h2为什么h1这时候没有被选中呢
写回答
1回答
-
同学你好，关于你的问题，回答如下：
1、不关后面加不加1，n都是从0开始的。不过若是后面加1了，整体是从1开始的。
2、h1不是被选中中，如下，背景颜色还是没有的。
是因为nth-child()在匹配下标的时候是不论元素类型的。而h1也是同一个父级下的元素。是占据一个位置的。所以在算位置的时候，h1也算的，换为h2的话，也是算位置的。但是至是算它占据的这个位置。因为要找p元素，这个并不符合，背景颜色还是不应用的。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题