选择最后一个元素及nthchild和nthoftype的区别

指定属于其父元素的最后一个子元素的 p 元素的背景色

p:last-child
{
background:#ff0000;
} CSS3 :nth-last-child() 选择器

规定属于其父元素的第二个子元素的每个 p 元素&＃xff0c;从最后一个子元素开始计数&＃xff1a;

p:nth-last-child(2)
{
background:#ff0000;
}

p:last-child 等同于 p:nth-last-child(1)

规定属于其父元素的第二个 p 元素的每个 p&＃xff0c;从最后一个子元素开始计数&＃xff1a;

p:nth-last-of-type(2)
{
background:#ff0000;
}

对于:nth-child选择器&＃xff0c;在简单白话文中&＃xff0c;意味着选择一个元素&＃xff1a;

1. 这是个段落元素
2. 这是父标签的第二个孩子元素

对于:nth-of-type选择器&＃xff0c;意味着选择一个元素&＃xff1a;

1. 选择父标签的第二个段落子元素

p:nth-child(2)悲剧了&＃xff0c;其渲染的结果不是第二个p标签文字变红&＃xff0c;而是第一个p标签&＃xff0c;也就是父标签的第二个子元素。如下效果截图&＃xff1a;

您可以狠狠地点击这里&＃xff1a;:nth-child测试demo2

p:nth-of-type(2)的表现显得很坚挺&＃xff0c;其把希望渲染的第二个p标签染红了&＃xff0c;如下截图&＃xff1a;

您可以狠狠地点击这里&＃xff1a;:nth-of-type测试demo2

参考文章&＃xff1a;http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/