css - a.css-class 和 .css-class 选择器有什么区别——如果我所有的酷元素都是 a？

Question

我对 CSS 的一个简单行为感到困惑。

我有一些 <a class="cool-element"></a> DOM 中的元素，dom 中没有其他类型的元素具有“cool-element”类，甚至 div 也没有。所以我这样做是为了尝试选择它们:

.cool-element {
  background-color: red;
}

令我惊讶的是，这没有用。但如果我这样做

a.cool-element {
  background-color: red;
}

我得到了预期的结果。我在 Firefox 和加载了许多其他 CSS 规则的应用程序中对此进行了测试。我没有单独测试过这个，但我很确定在其他一些地方我成功地使用了第一个选择器。这里的第一个选择器不是应该一直都工作得很好，还是我遗漏了什么？

Answer 1

CSS 特异性

在 CSS 中，更具体的规则优先于不太具体的规则。您可以使用以下方法计算给定选择器的特异性

1. 内联样式+1000 - 内联样式始终优先
2. +100 for an id - 元素的 id 属性
3. +10 类或伪类 - 类属性或 :hover
4. +1 用于元素或伪元素 - html、body、div、p... 或 :first、:last

一个选择器覆盖所有比它小的选择器。如果它们的点数相同，则顺序很重要。

例子

a.class-name = 1 + 10 = 11
a#id.class-name = 1 + 100 + 10 = 111
a.class-name.class2-name = 1 + 10 + 10 = 21

直到我了解了点数是如何计算的，CSS 在我心目中是一门黑暗的艺术。 css-tricks上有一篇很好的文章这可能会更好地解释它 - 跳转到计算 CSS 特异性值部分

订单事项

正如 Jorge Alvarado 提到的顺序很重要，因此如果您有两个规则应用于相同的元素，则第二个样式将覆盖第一个。

a.class-name { background: red } #this rule will be overridden
a.class-name { background: green } #this rule will be applied