> * 和没有它之间有什么区别？

Question

假设我有这个 html:

<div class="wrapper">
  <p>testOne</p>
  <p>testTwo</p>
  <p>testThree</p>
</div>

如果我想申请p标签设计，我可以去CSS使用：

1)

.wrapper > * {
  color: red; 
}

或

2)

 .wrapper {
      color: red; 
    }

两者都工作得很好，那么，有什么区别呢？我曾听说第一个示例仅将设计应用于“包装器”的直接子项，所以我做了：

<div class="wrapper">
  <p>testOne</p>
  <div class="container">
     <p>testTwo</p>
  </div>
  <p>testThree</p>
</div>

所以 testTwo 不是的直系子代..但他的颜色仍然是红色！

Answer 1

so testTwo is not a direct child..but he still got the color red!

testTwo 的 parent <div class="container"> 颜色为红色，因此其所有 children 都继承了该样式。这与将您的主体颜色设置为红色并反映在整个文档上的基本行为相同。

I have heard once that the the first example apply the design only to the direct childs of the "wrapper"

没错。

也许 border 会更好地说明选择器之间的区别，因为 children 不继承它：

.wrapper > * {
  border: 1px solid red; 
}
.wrapper {
  border: 1px solid blue; 
}

<div class="wrapper">
  <p>testOne</p>
  <div class="container">
     <p>testTwoA</p>
     <p>testTwoB</p>
  </div>
  <p>testThree</p>
</div>

虽然你没有问过它，但对于上下文也考虑 .wrapper *，它选择所有 children 而不管深度，进一步说明 >:

.wrapper * {
  border: 1px solid green;
}
.wrapper > * {
  border: 1px solid red; 
}
.wrapper {
  border: 1px solid blue; 
}

<div class="wrapper">
  <p>testOne</p>
  <div class="container">
     <p>testTwoA</p>
     <p>testTwoB</p>
  </div>
  <p>testThree</p>
</div>

请注意，上例中的顺序很重要，因为 .wrapper * 和 .wrapper > * 不再像 .wrapper 和 .wrapper > * 那样不相交。

What is the difference between: > * and without it?