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

Question

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

Answer 1

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

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

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

Answer 2

你把五个段落的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>

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

p:not(:nth-last-child(2)) {
  border-bottom: solid 1px #ededed;
}

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