css3选择器 nth-child()

最新推荐文章于 2021-06-20 12:19:59 发布

转载最新推荐文章于 2021-06-20 12:19:59 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jolee/p/5891760.html

本文介绍了如何使用CSS3中的:nth-child(n)和:nth-of-type(n)选择器来选取特定位置的元素。通过实例展示了如何选取父元素下的第n个子元素，无论元素类型；并进一步讲解了仅选取特定类型的第n个子元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近几天在找工作，看到了一个题，说取ul下第三个li，用js和css分别实现。

当即来了兴趣，ul下第n个li用js很好实现，each遍历item即可。

示例：

1 $("ul li").each(function(itme){
2 
3   if(item==2){
4 
5   alert("ok");
6 
7   }
8 
9 })

但，用css怎么实现呢？陷入了迷茫....查了半天资料，发现了 css3的一个好东西 nth-child()

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

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

示例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5 p:nth-child(2)
 6 {
 7 background:#ff0000;
 8 }
 9 </style>
10 </head>
11 <body>
12 
13 <h1>这是标题</h1>
14 <p>第一个段落。</p>
15 <p>第二个段落。</p>
16 <p>第三个段落。</p>
17 <p>第四个段落。</p>
18 
19 <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
20 
21 </body>
22 </html>

输出结果是

可以看到，第一个p背景变红。这就是所谓的父元素下第n个元素，不论类型。

但，可以解决上面问题

ul li:nth-child(3) 即可

继续延展下去，发现 :nth-of-type(n)

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

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

示例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5 p:nth-of-type(2)
 6 {
 7 background:#ff0000;
 8 }
 9 </style>
10 </head>
11 <body>
12 
13 <h1>这是标题</h1>
14 <p>第一个段落。</p>
15 <p>第二个段落。</p>
16 <p>第三个段落。</p>
17 <p>第四个段落。</p>
18 <p>第五个段落。</p>
19 
20 </body>
21 </html>