非分类元素为何干扰带特定类span子元素的首末子元素样式

哈哈，这个问题我太熟了！本质是你搞混了:first-child/:last-child的作用对象——它们是针对当前元素在父元素里的位置，而不是你想选中的「元素内部的子元素」位置。

先还原你的场景（根据描述） #

假设你的HTML结构大概是这样：

<div class="parent">
  <div class="unrelated">无关DIV1</div>
  <span class="my-span">
    <p>我是span内第一个子元素</p>
    <p>我是中间的子元素</p>
    <p>我是span内最后一个子元素</p>
  </span>
  <div class="unrelated">无关DIV2</div>
</div>

你可能写了类似这样的错误CSS：

/* 错误：把:first-child用在了span本身，而非它的子元素 */
.my-span:first-child p {
  color: red;
}
.my-span:last-child p {
  color: blue;
}

为什么移除首尾DIV就生效？ #

移除那两个无关DIV后，.my-span就变成了.parent的第一个和最后一个子元素，这时候.my-span:first-child和.my-span:last-child就能匹配到它，里面的p元素样式自然就生效了。但这完全是巧合，不是你真正要的效果——你要的是不管.my-span在父元素的什么位置，都选中它自己内部的第一个/最后一个子元素。

正确的写法 #

把:first-child/:last-child放在你要选中的子元素上，而不是外层的span上：

/* 通用写法：选中.my-span直接子元素里的第一个和最后一个 */
.my-span > :first-child {
  color: red;
}
.my-span > :last-child {
  color: blue;
}

/* 如果子元素是特定标签（比如p），可以更精准： */
.my-span > p:first-child {
  color: red;
}
.my-span > p:last-child {
  color: blue;
}

原理补充 #

:first-child的规则是「匹配父元素的第一个子元素」，所以你之前写的.my-span:first-child，意思是「找到所有同时是父元素第一个子元素、且拥有.my-span类的元素」——但你的结构里，父元素的第一个子元素是那个无关DIV，所以这个选择器根本匹配不到任何元素，样式自然不生效。

调整伪类的位置后，选择器的目标就变成了.my-span内部的子元素，完全不受父元素其他子元素的影响，不管有没有那两个无关DIV，样式都能正常生效。

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