我的CSS Selector出了什么问题？

Question

我在div里面有一个div。 .wrapper是.level的父级。

<div class="wrapper">
  <div class="level">
    Engkus Kusnadi
  </div>
</div>

当我将.level的样式与.wrapper包含为选择器时，其工作正常且背景更改为绿色。

.wrapper .level {
  background:green;
}

但是问题发现，当我将样式添加到唯一的.level选择器背景为红色时，它什么也没发生。

.wrapper .level {
  background:green;
}

.level {
  background:red;
}

这是我的小提琴https://jsfiddle.net/vcb4eqy4/

我错了什么？ CSS Selector上有更高级别吗？

Answer 1

你的问题在这里：

.wrapper .level {
  background:green;
}

.level {
  background:red;
}

通过定义.wrapper .level规则，您定义了一个比.level更具体的规则。如果存在冲突规则，则应用更具体的规则。

更改您的代码，如下例所示，您将看到它的含义：

.wrapper .level {
  background:green;
}

div.wrapper .level {
  background:red; // this is now more 'specific'
}

您可以阅读this article以了解有关这些规范的更多信息。