:last-child伪类不生效但:first-child正常，原因是什么？

p:last-child这个选择器的逻辑是：选中既是p标签，同时又是它父元素的最后一个子元素的元素。

看你的代码：

• div里的最后一个p，刚好是div的最后一个子元素，所以被选中变红，没问题。
• 你说body里的最后一个p没变红，要么是你实际代码里body的最后一个子元素不是这个p（比如body末尾加了script、style这类标签），要么是你误解了这个选择器的作用——它不是选页面里所有p的最后一个，而是每个父元素里的最后一个p，且这个p必须是父元素的最后一个子元素。

如果你就是想选每个父元素里的最后一个p（不管父元素最后一个子元素是不是p），换用:last-of-type就行，它专门负责找父元素下某类标签的最后一个：

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

这样不管body中间有没有div，body里的最后一个p、div里的最后一个p都会被选中变红，刚好符合你要的效果。

因为你代码里body的第一个子元素是p，div的第一个子元素也是p，所以p:first-child刚好能匹配到这些元素。要是body开头第一个元素不是p，那p:first-child也不会生效，道理和:last-child是一样的。

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