我的 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;
}

这是我的 fiddle https://jsfiddle.net/vcb4eqy4/

我哪里错了？ CSS 选择器是否有更高级别？

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