您的位置：首页 > Web前端

前端技术学习之选择器（六）

2017-01-09 00:00 281 查看

七，结构性伪类选择器：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代表从后向前，其他地方没差别。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 选择器 nth-child(n) 伪类

相关文章推荐

新的分享

章节导航