专栏首页山河木马选择最后一个元素及nth-child和nth-of-type的区别

选择最后一个元素及nth-child和nth-of-type的区别

CSS3 :last-child 选择器

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

p:last-child
{ 
background:#ff0000;
}

CSS3 :nth-last-child() 选择器

规定属于其父元素的第二个子元素的每个 p 元素,从最后一个子元素开始计数:

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

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

CSS3 :nth-last-of-type() 选择器

规定属于其父元素的第二个 p 元素的每个 p,从最后一个子元素开始计数:

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

对于:nth-child选择器,在简单白话文中,意味着选择一个元素:

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

对于:nth-of-type选择器,意味着选择一个元素:

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

例子:

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

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

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

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

参考文章: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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 总结伪类和伪元素(转)

    先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述:

    山河木马
  • 使用jQuery筛选排除元素以修改指定标签的属性

    1、eq()    筛选指定索引号的元素 2、first()  筛选出第一个匹配的元素 3、last()   筛选出最后一个匹配的元素 4、hasClas...

    山河木马
  • 脱离文档流分析(转)

      block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。block元素可以设置widt...

    山河木马
  • CSS选择器的详细介绍

    python鱼霸霸
  • jQuery设计思想

    jQuery是目前使用最广泛的javascript函数库。 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQue...

    ruanyf
  • jQuery学习笔记

    jQuery函数位于一个document ready函数中,我们需要在js中加载该函数文档

    Mirror王宇阳
  • 可替换元素和非替换元素

    可替换元素replaced element也称作可置换元素,其展现效果不是由CSS来控制的,这些元素是一种外部对象,它们外观的渲染,是独立于CSS的。非置换元素...

    WindrunnerMax
  • js查询数组或者List类型是否包含某个元素

    start:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首...

    yaphetsfang
  • EasyNVR RTSP转RTMP/HLS流媒体服务器前端构建之:内部搜索功能的实现

    通过filter()函数来对需要检索的原始数据进行筛选; filter用于筛选出与指定表达式匹配的元素集合。 这个方法用于缩小匹配的范围。用逗号分隔多个...

    EasyNVR
  • CSS属性汇总--(6) 定位属性3

             right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

    py3study

扫码关注云+社区

领取腾讯云代金券