我的 CSS 选择器有什么问题？ [复制]

Question

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

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

当我使用 .wrapper 作为选择器为 .level 赋予样式时，它工作正常并且背景变为绿色。

.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 以了解有关这些规范的更多信息。