CSS3 :nth-child() 选择器 -

CSS3 :nth-child() 选择器

作者：MJ 发布于：2017-1-4 8:10 Wednesday 分类：Css

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

提示：请参阅 :nth-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素。

实例 1

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

<style type="text/css">
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
.col-3{background: #eee; color: #333; height: 100px; text-align: center; font-size: 18px; line-height: 100px;margin-bottom:10px;}
.col-3:nth-child(3){background: #000;color: #fff;}
</style>

<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

<div class="col-3">1</div>
<div class="col-3">2</div>
<div class="col-3">3</div>
<div class="col-3">4</div>

<style type="text/css">
.col-3{background: #eee; color: #333; height: 100px; text-align: center; font-size: 18px; line-height: 100px;margin-bottom:10px;}
.col-3:nth-child(3){background: #000;color: #fff;}
</style>
<div class="col-3">1</div>
<div class="col-3">2</div>
<div class="col-3">3</div>
<div class="col-3">4</div>

实例 2

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

<style> 
div:nth-child(3n+0)
{
background:#ff0000;
}
</style>

<div>第一个段落。</div>
<div>第二个段落。</div>
<div>第三个段落。</div>
<div>第四个段落。</div>
<div>第五个段落。</div>
<div>第六个段落。</div>
<div>第七个段落。</div>
<div>第八个段落。</div>
<div>第九个段落。</div>

« JS正则表达式大全 | CSS3 calc() 会计算的属性»

发表评论：

blogger
分类
- MJ分享(5)
- JQuery(23)
- Css(16)
- Html5(1)
- PHP(20)
- Seo优化(3)
最新碎语
- 佛曰：命由己造，相由心生，世间万物皆是化相，心不动，万物皆不动，心不变，万物皆不变。
  2012-10-24 02:01
- 佛曰：人生有八苦：生、老、病、死，爱别离，怨长久，求不得，放不下！
  2012-10-24 01:59
- 佛曰：笑着面对，不去埋怨。悠然，随心，随性，随缘。注定让一生改变的，只在百年后，那一朵花开的时间。
  2012-10-24 01:56
- 裤子尺码：腰围29（2.23尺/75-76cm）前档24-25cm 大腿48-50cm 小腿32-33cm 裤长95cm
  2012-10-17 15:49
- WEB前端工程师：我们是工程师中的设计师，是设计师中的工程师。
  2012-09-02 15:34
搜索
随机日志
链接

CSS3 :nth-child() 选择器

blogger

分类

最新碎语

搜索

随机日志

链接