zoukankan      html  css  js  c++  java
  • 为什么选择器:last-child有时没有起作用?

    想要有.list样式的最后一个不要下划线。
    为什么:last-child没有起作用?

    clipboard.png

    el:last-child 的匹配规则是:第一步,查找 el 选择器匹配元素的所有同级元素(siblings);第二步,在同级元素中查找最后一个元素;第三步,检验最后一个元素是否与选择器 el 匹配。

    .list:last-child 匹配到了 footer,但 footer 不匹配 .list,故选择器不生效。

    1.可改成.list:nth-last-child(2)

    2. 把所有.list标签用div包起来,保证最后一个子元素为.list

    3.div .list:first-of-type{font-weight:blod}

    这时候调试下就没问题了。
    这里我们要理解下:first-child和:first-of-type 区别:
    :first-child  指的是父元素的第一个子元素,例如我们本例子中要使用first-child实现的话,必须把h1标签去掉保证没有兄弟元素,或者单独把P标签包围起来;

    :first-of-type 指的是父元素下相同类型子元素中的第一个,比如我们例子中的第一个p标签。
  • 相关阅读:
    数据流图和数据流程图的定义与组成元素
    敏捷开发3种角色
    WBS
    开发流程
    结对编程
    笔记
    登录注册界面维护2----注册界面进行Toast提示
    登录注册界面修改错误
    听说
    “学习链接篇”
  • 原文地址:https://www.cnblogs.com/yzhihao/p/11593871.html
Copyright © 2011-2022 走看看