关于nth-child()
来源：2-1 position-static
Jin66
2020-03-28 22:28:28
<!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>老师您看我这个解释对不对nth-child(3n+1)这里的3n+1代表这一个父元素以下从第一个子元素开始计算到符合前面的3数字时就符合数值
还有个疑问就是，如果时body一下的子元素，那么我吧p替换成h1为什么不起作用了呢
写回答
1回答
-
同学你好，关于你的问题，回答如下：
1、理解的不是特别的严谨。使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始）。
就是说这里的表不是要从第一个开始，是n从0开始。b是几的话，就会从几开始哦。
2、nth-child()在匹配下标的时候是不论元素类型的。例如：
nth-child(1)在寻找计算下标的时候（就是开始的时候，第一个），会把p的其他类型的兄弟元素都算在内。h1下标为1 ，nth-child(1)匹配的就是h1 。
而 :nth-child(1)前面规定了p , p:nth-child(1)选择下标为1的元素，并且这个元素为p 。不符合的元素，所以没有选择这个元素。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
1
相似问题