我的CSS选择器有什么问题？

我在一个div中有一个div。

.wrapper

是

.level

的父级

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

但问题是，当我将唯一的

.level

选择器背景添加到红色时，什么也没有发生

.wrapper .level {
  background:green;
}

.level {
  background:red;
}

这是我的小提琴

我怎么了？CSS选择器是否有更高的级别？

您的问题在于：

.wrapper .level {
  background:green;
}

.level {
  background:red;
}

通过定义

.wrapper.level

规则，您定义了比

.level

更具体的规则。如果存在冲突规则，则应用更具体的规则

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

.wrapper .level {
  background:green;
}

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

---

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

第一个选择器更为具体，因此它可以使用

.level.level

，并且不会丢失。不过，我不明白这有什么意义。你可能会发现这很有帮助：你也可以使用开发工具在浏览器中更改样式。这可能是最好的方法，再加上一些阅读，来了解CSS选择器中优先级是如何工作的！对css属性很重要。i、 背景：红色！重要的；

.wrapper .level {
  background:green;
}

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