嘿，我来帮你把这个嵌套样式里的> *选择器掰扯清楚！首先先把你给出的代码整理成更清晰的格式——看起来这应该是Styled Components、Sass这类支持嵌套语法的CSS预处理器或样式库的写法：

.A { 
  padding: 0;
  .B { 
    > * { 
      boxShadow: '0 1px 1px rgba(0, 0, 0, .1)' 
    } 
  } 
}

先转成标准CSS看全貌 #

这种嵌套写法最终会被编译成普通的CSS，等价于下面这段代码，这样你就能更直观地看到选择器的完整形态：

.A {
  padding: 0;
}
.A .B > * {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

拆解 > * 的具体含义 #

你对*的猜测方向是对的，不过得结合嵌套语境和子组合器的作用完整理解：

• *是通配选择器，能匹配任意类型的HTML元素，不管是<div>、<p>还是<span>都能命中。
• >是子组合器，在嵌套语法里它是相对于父选择器.B来用的——也就是说，这里的> *其实是.B > *的简写（预处理器会自动把父选择器拼在前面）。

所以完整的选择器.A .B > *的意思就是：

所有直接作为.A后代里的.B元素的子元素的任意类型元素。

举个实际的HTML例子你就懂了：

<div class="A">
  <div class="B">
    <p>我会被加上阴影样式</p>
    <div>我也会被加上阴影</div>
    <span>我同样会被选中</span>
    <div class="inner-box">
      <p>我不会被选中——因为我是.B的孙子元素，不是直接子元素</p>
    </div>
  </div>
</div>

上面的<p>、<div>、<span>都会应用那个阴影样式，但.inner-box里的<p>就不会，因为它不是.B的直接子元素。

为什么嵌套里的写法和你认知的>不一样？ #

你之前了解的>是放在两个选择器之间（比如parent > child），那是标准CSS的写法。而在支持嵌套的语法中，我们可以在父选择器的代码块里直接写子选择器规则，预处理器会自动帮我们把父选择器和子选择器组合起来——所以.B代码块里的> *，就相当于把.B和> *组合成.B > *，再结合外层的.A，最终得到.A .B > *。

这种写法的好处就是让样式结构和HTML结构更对应，读起来更顺~

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