日期:2013-12-10 浏览次数:21121 次
原文:The Difference Between :nth-child and :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” 这事呢?可能有那么几次,但是更多的可能是你想“选中第二个段落”或者“每隔两行选择一行 (select every third table row)”,也就是说 :nth-of-type 是愈加好的一个选择(再次声明,作者团体意见)。
我发现当我抱怨“为什么 :nth-child 选择符不行?”时,绝对多数的情况是由于在选择符前限定了标签,而那个位置的子元素不是那个标签。因