Styled-components中>与&选择器的作用差异是什么？

该认知存在错误，两段样式的渲染效果并不等价。

• styled-components中的&不是指代父级的符号，它是当前styled组件自身生成的唯一类名的占位符，样式编译时会被直接替换为组件对应的实际类选择器。
• >是CSS原生的子代组合符，本身不具备指代元素的作用，它的规则是仅匹配前序选择器对应元素的直接子节点。

写法1：> p #

编译后对应的原生CSS选择器为：

/* 其中styled-xxx是组件生成的唯一随机类名 */
.styled-xxx > p {
  color: red;
}

这是标准的CSS子代选择器，仅会命中Container组件的直接子级p标签，任何嵌套在Container内部其他子元素（如div、section等）中的p标签都不会被该样式影响。

写法2：& p #

编译后对应的原生CSS选择器为：

.styled-xxx p {
  color: red;
}

这是标准的CSS后代选择器，会命中Container组件内部所有层级的p标签，不管是直接子级、孙级还是嵌套层级更深的p标签，只要处于Container的DOM子树内，都会被该样式命中，作用范围远大于写法1。

给定如下DOM结构：

<Container>
  <p>直接子级p</p>
  <div>
    <p>嵌套在div中的孙级p</p>
    <section>
      <p>嵌套在section中的曾孙级p</p>
    </section>
  </div>
</Container>

两种写法的实际渲染效果：

• 使用写法1时，只有第一个「直接子级p」会显示为红色，其余两个嵌套更深的p标签不受影响
• 使用写法2时，三个p标签都会显示为红色

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