nth-child(3n+0)

教辅里面介绍的nth-child(3n+0)是什么意思？odd和even可用于匹配下标是奇书或偶数的子元素关键词。没明白指的是什么

慕村1704847 2017-10-26

源自：CSS定位（position） 2-8 position-absolute（实际工作用的最多，同时也相对比较难）

收起

1回答

好帮手慕糖 2017-10-27 09:54:38

你好，这里的3n+0是个公式哟，nth-child(3n+0)就是指匹配属于同一个父级下，符合3n+0这个公式的元素。

odd用于匹配下标是奇数子元素，even用于匹配下标偶数的子元素；要注意的是第一个子元素的下标是 1（这里的下标从1开始）；可结合下面的例子理解，建议：可根据教辅动手敲下代码哟，便于更好地理解哟，

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五段</p>
</body>
</html>

祝学习愉快~

收起回答