CSS3 之:nth-child() 选择器
Posted IT大亨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 之:nth-child() 选择器相关的知识，希望对你有一定的参考价值。
:nth-child() 选择器
:nth-child() 是一个结构伪类函数，它可以选择某个元素包含的一个或多个特定的子元素。
eg：
<style>
p:nth-child(3)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</body>
屏幕截图如下：
例：
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
eg：
<style>
p:nth-child(odd)
{
background:#ff6;
}
p:nth-child(even)
{
background:#fcc;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</body>
屏幕截图如下：
例:
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
eg：
<style>
p:nth-child(3n+0)
{
background:#f0f;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
<p>段落7</p>
<p>段落8</p>
<p>段落9</p>
</body>
屏幕截图如下：
以上是关于CSS3 之:nth-child() 选择器的主要内容，如果未能解决你的问题，请参考以下文章