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

smart_dream
  • 99

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

clipboard.png

clipboard.png

clipboard.png

clipboard.png

回复
阅读 18.5k
7 个回答

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标签都给包起来!要不找不到闭合区间!

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

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

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

诺诺
  • 5
新手上路,请多包涵
p:not(:nth-last-child(2)) {
  border-bottom: solid 1px #ededed;
}

:not())排除选择器
nth-last-child()倒数选择器

你知道吗?

宣传栏