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

2023-12-04 13:47:56 前端笔记 116

关于此选择器的基本用法可以参阅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="/" />
<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地址是。</li>
</ul>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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地址是。</li>
</ul>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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="/" />
<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地址是。</li>
</ul>
</body>
</html>

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

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

倍数写法:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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地址是。</li>
</ul>
</body>
</html>

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

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

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