当我可以使用 * 作为选择器时，为什么还要使用 > *？ [复制]

【问题标题】：Why would I use > * when I could just use * as a selector? [duplicate]当我可以使用 * 作为选择器时，为什么还要使用 > *？ [复制]
【发布时间】：2020-07-16 23:10:51
【问题描述】：

我正在审查一些代码，但我看到了一些对我来说没有意义的东西。

我看到选择器所在的 css

 .panel  > * {
     /* css code here */
}

我的理解是，这给了我面板类的所有孩子，并让我编辑他们的 css。但是，我为什么不直接使用以下内容呢？

 .panel  > {
     /* css code here */
}

第一个代码示例中的 * 不是多余的吗？

【问题讨论】：

第二个无效
这不验证为有效的 CSS 语法。您是否找到说明可以跳过选择器的文档？它可能在某些实现中有效，但并不意味着它可以在任何地方都有效
检查重复项以了解此类选择器的语法以及何时可以省略 * 如果由 * 表示的通用选择器（即没有命名空间前缀）不是序列的唯一组成部分简单的选择器选择器或紧随其后的是伪元素，那么 * 可以省略

标签： css css-selectors

【解决方案1】：

你自己也可以这样做，但这里有一个例子表明它不起作用

 .panel  > * {
     background-color: blue;
}

 .panel2  > {
     background-color: blue;
}

<div class="panel">
  <div>test</div>
  
  <p>test2</p>
</div>


<div class="panel2">
  <div>test</div>
  
  <p>test2</p>
</div>

如果你的意思是为什么不直接使用* 而不是> *，那么女巫问起来更有意义。

看这个例子

p {
  font-weight: 300;
}

.panel > * {
  font-weight: 600;
}

.panel2 * {
  font-weight: 600;
}

<div class="panel">
  <div>
    <p>P tag inside another div</p>
  </div>
  
  <p>P tag in .panel</p>
</div>


<div class="panel2">
  <div>
    <p>P tag inside another div</p>
  </div>
  
  <p>P tag in .panel</p>
</div>

> 选择器仅选择元素的直接子元素，因此在这种情况下，仅选择 div 和第二个 p，而 * 选择所有子元素及其所有子元素，因此它选择 @ 987654330@、p inside the div 和p

【讨论】：