Question

假设这个加价：

<html class="fr">
<head>
</head>
<body>
 <div class="class1">
 </div>
</body>
</html>

请问：

.fr .class1 {
  background-color: blue;
}

优先于此：

.class1 {
  background-color: red;
};

编辑：

对于那些想知道的人，是的，我曾经尝试过:)我没有在这里解释完整的问题，并在这篇文章之后发现了这个问题。

基本上，我在同一样式表中有两种样式：

.fr .class1 {
  font-size: 12px;
}

.class1 {
  font-size: 12px;
  line-height: 18px;
  height: 80px;
}

虽然技术上.fr .class1对.class1采用优先级，但这并不意味着该元素会将所有.class1的样式替换为.fr .class1的风格。相反，它首先查看.fr .class1样式，然后查看.class1。这是“显而易见的”，但这就是我遇到困难的原因。

我的目标是使用.fr .class1优先于.class1来删除样式。为此，我意识到我需要将值设置为0或中性值：

实施例）

.fr .class1 {
  font-size: 12px;
  line-height: 0;
  height: auto;
}

否则，它将级联到.class1并填写这些样式。

Answer 1

是的，因为.fr .class1引用了两个类名，而.class1只引用了一个，第一个更具体。 CSS标准中的规则是here。

Answer 2

是的，因为第一个示例的两个类名与一个相比。

Answer 3

回应编辑：

CSS将值分别应用于每个属性。块分组无关紧要。所以

.fr .class1 {
  font-size: 12px;
}

.class1 {
  font-size: 12px;
  line-height: 18px;
  height: 80px;
}

与

相同

.fr .class1 {
  font-size: 12px;
}
.class1 {
  font-size: 12px;
}
.class1 {
  line-height: 18px;
}
.class1 {
  height: 80px;
}

，.fr .class1比.class1更具体，与

相同

.fr .class1 {
  font-size: 12px;
}
.class1 {
  line-height: 18px;
}
.class1 {
  height: 80px;
}