css child selector expression 理解混淆 下面代码走一遍

Question

在 CSS 中这是什么意思？ .wb 是一个类，我也知道 .wb-chIld 可能是它的子类，它继承了它的属性。现在什么是 > 和 * ？什么情况下我们会写这样的代码？

.wb, .wb-child > * {
     border-width: 2px;
}

Answer 1

让我们分解一下。

所以我们有:

.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 .