Emotion CSS中:first-child选择器未生效，求排查问题原因

你遇到的问题核心是CSS选择器中&:first-child和& :first-child的关键差异——前者会把样式应用到组件自身，后者才会选中组件内部的第一个子元素，这也是你手动添加空格后样式生效的原因。

关键原理：&在Styled Components/Emotion中的作用 #

在CSS-in-JS库（比如Emotion或Styled Components）里，&代表当前组件生成的DOM元素。这里的空格是区分选择器类型的核心：

• &:first-child（无空格）：这是把:first-child伪类直接绑定到组件自身，意思是「当这个组件是它父元素的第一个子元素时，应用样式」——完全不会影响组件内部的子元素。
• & :first-child（有空格）：这是后代选择器，相当于[当前组件的CSS类] :first-child，作用是选中组件内部所有子元素中的第一个，这才是你想要的效果。

结合你的代码分析 #

看你在StyledCustomComponent里的这段媒体查询：

@media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {
 &:first-child { margin-top: 0; }
}

这里的&:first-child是在给StyledCustomComponent自身设置样式，而不是它的子元素。你需要添加空格，改成& :first-child才能选中组件内部的第一个子元素。

再看你测试的有效示例：

const StyledDiv = styled.div`
 color: turquoise;
 & :last-child { color:green; }
 & :first-child { color: red; }
`

这里你特意加了空格，所以& :first-child能正确选中<StyledDiv>内部的第一个<p>元素，样式自然生效。如果去掉空格写成&:first-child，那只有当这个StyledDiv是它父元素的第一个子元素时，StyledDiv本身才会变成红色，和内部的<p>完全无关。

修复方案 #

把你代码中所有想要选中组件内部第一个子元素的地方，将&:first-child修改为& :first-child（注意保留空格）：

1. 修改StyledCustomComponent的媒体查询：

@media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {
 & :first-child { margin-top: 0; } /* 添加空格 */
}

2. 修改StyledCustomComponentChild的媒体查询：

@media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {
 /* 其他样式保持不变 */
 & :first-child { display: block; } /* 添加空格 */
}

总结规则 #

记住这个简单的区分方式：

• &:pseudo-class → 样式作用于组件自身
• & :pseudo-class → 样式作用于组件内部的后代元素

这样就能精准控制样式的作用目标了。

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