在 CSS 中这是什么意思? .wb 是一个类,我也知道 .wb-chIld 可能是它的子类,它继承了它的属性。现在什么是 > 和 * ?什么情况下我们会写这样的代码?
.wb, .wb-child > * {
border-width: 2px;
}
最佳答案
让我们分解一下。
所以我们有:
.wb, .wb-child > * {
border-width: 2px;
}
.wb
:是一个类,任何有这个类的东西都会有下面定义的样式。
.wb, .wb-child > *
:现在我们有一个逗号 ,
这允许我们在一个样式上有多个选择器。所以在这种情况下有 2 个选择器,.wb
和 .wb-child > *
。
.wb-child > *
:现在让我们看一下这是在选择什么。它指向 .wb-child
并选择所有(*
选择所有元素)该类的直接子级。
让我们在演示中看一下。
.wb,
.wb-child > * {
border: 1px solid red;
margin: 5px;
}
<div class="wb">
This is some test text.
<div class="wb-child">
<span>I am a immediate span child of .wb-child</span>
<div>I am a immediate div child of .wb-child
<div>I am a child of this div, not an immediate child of .wb-child</div>
</div>
</div>
</div>
在此演示中,我们为 .wb
和 所有 .wb-child
子级( > *
)。请注意 .wb-child
本身没有边框,只有它的 child 有。
.wb-child
div
中的 div
也不受影响,这是因为它不是一个直接的.wb-child
的 child 。
了解更多关于*
选择器的信息here .
关于css child selector expression 理解混淆 下面代码走一遍,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30772848/