本文介绍了CSS中结构性伪类选择器:nth-child(n)的使用方法及实例，展示了如何通过:nth-child(n)来选择特定的子元素，并给出了具体的HTML代码示例。同时，还讲解了:nth-child(n)的选择规律及其与:nth-last-child(n)的区别。
七，结构性伪类选择器：nth-child(n)
:nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素。
代码例子：
<!DOCTYPE html>
<html>
<head>
<style>
/*p:nth-child(2n+0)
{
background:#ff0000;
}
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>
</body>
</html>
运行效果：
备注：Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
：nth-last-child(n)和:nth-child(n)相似，但是多了个last，这个last代表从后向前，其他地方没差别。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
