为什么选择器:last-child没有起作用?

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

clipboard.png

clipboard.png

clipboard.png

clipboard.png

阅读 17.2k
评论
    6 个回答

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

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

    相比用 last-of-type,一个可能更好的方案是:将所有 p 标签用一个父元素包起来,然后用:
    .list:not(:last-child) {} // 不兼容 IE9-

      你把五个段落的p标签用一个标签包含起来

      <div>
          <p class="list">1</p>
          <p class="list">2</p>
          <p class="list">3</p>
          <p class="list">4</p>
          <p class="list">5</p>
      </div>

        你需要用一个div把p标签都给包起来!要不找不到闭合区间!

          • 9k

          p.list 下方还有个 foot 呢,可以用 :last-of-type

            • 71

            父元素是body,最后一个元素是footer:
            .list:nth-last-child(2)

              他查找的是父级元素,你这个算啥

                撰写回答

                登录后参与交流、获取后续更新提醒

                相似问题
                推荐文章