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

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

因此testTwo不是直接子级。。但他还是染上了红色！

testTwo的父级<div class="container">的颜色为红色，因此它的所有子级都继承了该样式。这与将你的身体颜色设置为红色以及反映在整个文档上的行为是相同的基本行为。

我曾经听说第一个例子只将设计应用于"；包装器"；

没错。

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

.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 * {
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 > *那样不相交。