为什么SCSS中:last-child选择器没有生效？

结论 #

你写的SCSS语法本身没有错误，编译后生成的CSS是合法可运行的，写法不生效大概率是HTML结构和选择器匹配逻辑不匹配导致的。 #

具体问题分析 #

:last-child选择器的匹配规则是：选中同时满足「是父元素的最后一个子元素」和「元素类型为p」的节点，只要触发下面任意一种情况，你的写法就命中不到第二个p标签：

• 两个p标签的父容器末尾还有其他类型的子元素（比如<span>、<div>等），导致第二个p不是父容器的最后一个子元素
• 两个p标签不是同级节点，不存在同一个父元素下

比如下面的HTML结构就会让你的写法失效：

<div class="wrapper">
  <p>This is the first line</p>
  <p>This is the second line</p>
  <span>我是父容器的最后一个子元素</span>
</div>

优化方案 #

如果你要精准选中同级的第二个p标签，不需要考虑父容器末尾有没有其他元素，可以换成下面两种更稳妥的写法：

1. 用:nth-child(2)直接匹配同级第二个p：

p {
  color: blue;
  &:nth-child(2) {
    color: red;
  }
}

2. 用:last-of-type匹配同级同类型标签的最后一个，不受其他类型元素影响：

p {
  color: blue;
  &:last-of-type {
    color: red;
  }
}

内容的提问来源于stack exchange，提问作者PoetikSage