css3选择器 nth-child()

最近几天在找工作，看到了一个题，说取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>

输出结果：

 

以上！

posted @ 2016-09-21 10:36  jolee  阅读(225)  评论(0)  编辑  收藏  举报