Question

在CSS中这是什么意思？ .wb是一个类，我也理解.wb-chIld可能是它的子类，它继承了它的属性。现在什么是＆gt;和*？在哪种情况下我们编写这样的代码？

.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本身没有边框，只有它的子节点。

同样div .wb-child内的div也不受影响，这是因为它不是.wb-child的直接子女。

详细了解*选择器here。

Answer 2

编辑：@misterManSam是对的，只有直接的孩子wb1才会应用border-width: 2px样式

'。wb-child＆gt; *'表示'wb-child'课程之后的所有标签。请参阅以下HTML代码示例：

<div class="wb-cihld">
  <div class="wb1">
    <div class="wb2">
    </div>
  </div>
</div>

~~'wb1'和'wb2'类都有'border-width：2px;'应用的风格。~~

css子选择器表达式理解混淆了下面的代码遍历

2 个答案: