|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
破洛洛文章简介::nth-child和:nth-type-of的区分.
原文:TheDifferenceBetween:nth-childand:nth-of-type
译文::nth-child和:nth-type-of的区分
假定有以下HTML代码:- <section><p>Little</p><p>Piggy</p><!--方针元素--></section>
复制代码 以下代码失掉的效果一样:- p:nth-child(2){color:red;}p:nth-of-type(2){color:red;}
复制代码 了局固然不异,可是二者自己仍是有所区分的。
:nth-child选择符从词义下去说,暗示,
选择满意以下前提的元素:
:nth-of-type选择符从词义下去看,暗示:
:nth-of-type是…怎样说好呢,哈~…较少前提要约的。
假定布局变更以下:- <section><h1>World</h1><p>Little</p><p>Piggy</p><!--方针元素--></section>
复制代码 那末,这类体例就“破”了:- p:nth-child(2){color:red;}
复制代码 可是,这个仍是”能用”的:- p:nth-of-type(2){color:red;}
复制代码 所谓的“破”,意义是下面的:nth-child选择符如今选到的是“Little”,而不是“Piggy”,由于这个元素满意以下一切前提:
所说的“能用”,意义是“Piggy”仍旧被选中,由于它是它父元素下的第二个段落元素p。
假如在h1以后增添一个h2,那末:nth-child选择符就甚么也选中不了了,由于当时第二个子元素就不再是段落元素p了。可是:nth-of-type仍旧仍是无效的。
我感到:nth-of-type绝对不那末懦弱,并且总的来讲加倍有效,只管:nth-child加倍罕见(作者团体定见)。你有几时分在想“我想选择父元素的第二个子元素,假如它刚巧是个段落元素p”这事呢?大概有那末几回,可是更多的多是你想“选中第二个段落”大概“每隔两行选择一行(selecteverythirdtablerow)”,也就是说:nth-of-type是加倍好的一个选择(再次声明,作者团体定见)。
我发明当我埋怨“为何:nth-child选择符不可?”时,相对多半的情形是由于在选择符前限制了标签,而谁人地位的子元素不是谁人标签。因而在利用:nth-child时,我以为最好仍是只指定父元素而且不要用标签来限定:nth-child。- dl:nth-child(2){}/*保举*/dd:nth-child(2){}/*不是很好*/
复制代码 固然,详细情形还得详细剖析。(我咋这么不喜好这句话呢–糖伴西红柿)
扫瞄器关于:nth-of-type的撑持是相称不错的…Firefox3.5+,Opera9.5+,Chrome2+,Safari3.1+,IE9+。假如必要更多的撑持,jQuery应当会挺你的(利用选择符,增加一个类名,利用类名来增加款式$(“selector:nth-child(xxxxx)”).addClass(“someClass”)),可是实践上jQuery却保持了对:nth-of-type的撑持,这很奇异啊,听说是由于:nth-of-type的利用率很低。有个插件可使得jQuery撑持它。
相干:不要忘了它这些了不得姊妹们:first-of-type:last-of-type:nth-last-of-type和:only-of-type。更多请看这里。
这里有一个LeaVerou做的可视化示例。
</p>
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 |
|