电话

    0411-39943997

仟亿科技
客服中心
  • 电话
  • 电话咨询:0411-39943997
  • 手机
  • 手机咨询:15840979770
    手机咨询:13889672791
网络营销 >更多
您现在的位置:首页 > 新闻中心 > 常见问题

:nth-child 和 :nth-type-of 的区别

作者:billionnet 发布于:2013/1/5 10:39:24 点击量:

 

假设有以下 HTML 代码:


    

Little


    

Piggy

 

以下代码得到的效果一样:

p:nth-child(2){color:red;} 
p:nth-of-type(2){color:red;}

结果虽然相同,但是两者本身还是有所区别的。

:nth-child 选择符 从词义上来说,表示,

选择满足以下条件的元素:

  1. 是一个段落元素 p
  2. 是父元素的第二个子元素

:nth-of-type 选择符 从词义上来看,表示:

  1. 选择父元素的第二个段落元素 p

:nth-of-type 是… 怎么说好呢,哈~ … 较少条件要约的。

假设结构变化如下:


    

World


    

Little


    

Piggy

 

那么,这种方式就“破”了:

p:nth-child(2){color:red;}

但是,这个还是”能用”的:

p:nth-of-type(2){color:red;}

所谓的“破”,意思是上面的 :nth-child 选择符现在选到的是 “Little”,而不是 “Piggy”,因为这个元素满足以下所有条件:

  1. 它是第二个字元素
  2. 它是一个段落元素 p

所说的“能用”,意思是 “Piggy” 仍然被选中,因为它是它父元素下的第二个段落元素 p 。

如果在 h1 之后增加一个 h2,那么 :nth-child 选择符就什么也选中不了了,因为那时第二个子元素就不再是段落元素 p 了。但是 :nth-of-type 仍然还是有效的。

我感觉 :nth-of-type 相对不那么脆弱,而且总的来说更加有用,尽管 :nth-child 更加常见(作者个人意见)。你有多少时候在想“我想选择父元素的第二个子元素,如果它恰巧是个段落元素 p” 这事呢?可能有那么几次,但是更多的可能是你想“选中第二个段落”或者“每隔两行选择一行 (select every third table row)”,也就是说 :nth-of-type 是更加好的一个选择(再次声明,作者个人意见)。

我发现当我抱怨“为什么 :nth-child 选择符不行?”时,绝对多数的情况是因为在选择符前限定了标签,而那个位置的子元素不是那个标签。因此在使用 :nth-child 时,我觉得最好还是只指定父元素并且不要用标签来限制 :nth-child 。

dl :nth-child(2) {} /* 推荐 */ 
dd:nth-child(2) {} /* 不是很好 */

当然,具体情况还得具体分析。(我咋这么不喜欢这句话呢 – 糖伴西红柿)

浏览器对于 :nth-of-type 的支持是相当不错的…Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+。如果需要更多的支持,jQuery 应该会挺你的(使用选择符,添加一个类名,使用类名来添加样式 $(“selector:nth-child(xxxxx)”).addClass(“someClass”)),但是实际上 jQuery 却放弃了对 :nth-of-type 的支持,这很奇怪啊,据说是因为 :nth-of-type 的使用率很低。有个插件可以使得 jQuery 支持它。

 

 



分享到:


Copyright@ 2011-2016 版权所有:大连千亿科技有限公司 辽ICP备11013762-3号   google网站地图   百度网站地图   网站地图

公司地址:大连市沙河口区中山路692号辰熙星海国际2317 客服电话:0411-39943997 QQ:2088827823 37482752

法律声明:未经许可,任何模仿本站模板、转载本站内容等行为者,本站保留追究其法律责任的权利! 隐私权政策声明