1

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

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

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

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

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

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

4

2 回答 2

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
于 2012-11-29T08:10:56.103 回答
1

我认为有时问题不是css中类的选择器，而是你放置它们的顺序，所以如果你先有那个类，然后有另一个覆盖或更改它们的规则，你将永远不会看到预期的结果。尝试组织规则的应用方式并再次比较。

让我们假设：

<div class="topclass">
   <a class="myclass1" href="#">a link</a>
</div>

a.myclass1{
    background-color:red;
}

a{
  background-color:blue;
 }

.topclass a{
   background-color:yellow;
 }

锚的最终渲染颜色为黄色。

于 2012-11-29T07:40:37.647 回答