nth-child() 选择器用法详解

快乐打工仔 分类:实例代码

关于此选择器的基本用法可以参阅CSS E:nth-child(n)一章节。

先看它的语法结构:

E:nth-child(n){ Rules }

下面介绍一下此选择器的作用:

(1).选择器首先匹配父元素的第n个元素。

(2).然后再根据E选择器进行筛选。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}
li:nth-child(3) {
  color:green;
}
</style>
</head>
<body>
<ul id="box">
  <li>犀牛前端部落欢迎您,只有努力才会有美好的未来</li>
  <li>每一天都是新的,必须要好好把握。</li>
  <li>没有人一开始就是高手,必须要努力奋斗。</li>
  <li>未来都是虚无缥缈的,只有当前是现实。</li>
  <li>分享和互助式进步的最大原动力</li>
  <li>本站的url地址是www.pipipi.net。</li>
</ul>
</body>
</html>

上面的代码可以将ul元素下第3个子元素li的字体颜色设置为绿色。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}
.antzone:nth-child(2) {
  color:green;
}
.antzone:nth-child(3) {
  color:green;
}
</style>
</head>
<body>
<ul id="box">
  <li>犀牛前端部落欢迎您,只有努力才会有美好的未来</li>
  <li class="antzone">每一天都是新的,必须要好好把握。</li>
  <li>没有人一开始就是高手,必须要努力奋斗。</li>
  <li class="antzone">未来都是虚无缥缈的,只有当前是现实。</li>
  <li>分享和互助式进步的最大原动力</li>
  <li class="antzone">本站的url地址是www.pipipi.net。</li>
</ul>
</body>
</html>

上面的代码可以将ul元素下第二个li元素的字体颜色设置为绿色,但是这个li元素的class属性值必须是antzone。

由于第三个li元素的class属性值非antzone,所以字体颜色不是绿色。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
p:nth-child(2) {
  color:green;
}
</style>
</head>
<body>
<h1>犀牛前端部落</h1>
<p>犀牛前端部落一</p>
<p>犀牛前端部落二</p>
<p>犀牛前端部落三</p>
<p>犀牛前端部落四</p>
</body>
</html>

上面的代码可以将body子元素的第二个元素字体颜色设置为绿色(如果是p元素的话)。

奇偶匹配:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}
li:nth-child(odd) {
  color:green;
}
</style>
</head>
<body>
<ul id="box">
  <li>犀牛前端部落欢迎您,只有努力才会有美好的未来</li>
  <li>每一天都是新的,必须要好好把握。</li>
  <li>没有人一开始就是高手,必须要努力奋斗。</li>
  <li>未来都是虚无缥缈的,只有当前是现实。</li>
  <li>分享和互助式进步的最大原动力</li>
  <li>本站的url地址是www.pipipi.net。</li>
</ul>
</body>
</html>

上面的代码可以将li元素奇数行字体颜色设置为绿色。

当然:nth-child()选择器的参数可以是even,即:nth-child(even)。

倍数写法:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}
li:nth-child(3n) {
  color:green;
}
</style>
</head>
<body>
<ul id="box">
  <li>犀牛前端部落欢迎您,只有努力才会有美好的未来</li>
  <li>每一天都是新的,必须要好好把握。</li>
  <li>没有人一开始就是高手,必须要努力奋斗。</li>
  <li>未来都是虚无缥缈的,只有当前是现实。</li>
  <li>分享和互助式进步的最大原动力</li>
  <li>本站的url地址是www.pipipi.net。</li>
</ul>
</body>
</html>

上面的代码可以将第三个和第六个li元素字体颜色设置为绿色。

这个n可以是1,2,3....。

当然括号中的这个规则可以延伸为:nth-child(2n+1),:nth-child(2n-3),:nth-child(4n+3)等等,可以无限扩展。

nth-child() 选择器用法详解

回复

我来回复
  • 暂无回复内容