CSS 特殊性规则答案

【问题标题】：CSS Specificity RulesCSS 特殊性规则
【发布时间】：2012-12-13 16:23:58
【问题描述】：

我正在使用 twitter bootstrap (TB)，似乎他们的 CSS 规则在不应该的情况下优先。我创建了这个小提琴来显示问题：

HTML

<div class="teaser">
     <h1 class="teaserText">Text text text <label>Label</label> Text <label>Activities</label></h1>
</div>

CSS（加上 twitter 引导程序的外部链接）

div.teaser h1.teaserText {
     font-size: 100px;
     font-weight: 100;
     color: black;
     line-height: 90px;
     font-family: "Trebuchet MS", "Arial Black", "Impact", "Arial";
     text-transform: uppercase;
}

div.teaser h1.teaserText label {
     color: #FCCE00;
}

根据我对特异性规则的了解，为 TB 中的标签定义的规则应该只得到 1 的值，因为 html 选择器的值是 1。我的类应该有 23 的值，因为我有 3 个 html 选择器和2 个类选择器，每个选择器的值应为 10。正如您在小提琴中看到的那样，尽管 TB css 定义中的标签选择器优先。

有人可以解释我在这里缺少什么吗？

顺便说一句，我知道我可以使用 !important 标签来解决这个问题，我只是想更好地理解 CSS 特定性规则。

【问题讨论】：

我很困惑。显然第二种风格更具体，因为它是完全相同的风格，最后多了一个“标签”？
首先我需要知道你在期待什么。我在小提琴中看到的是 TEXT TEXT TEXT 是黑色和 100px 大小。标签和活动是正常的字体大小和黄色。即它正在选择字体系列、文本转换和颜色。
“我知道我可以使用!important 标签来解决这个问题”——不是在我的代码中你不能。 !important 也不是标签，我认为它在这里不会有任何区别。
我原以为黄色的小标签也会采用相同的字体大小、高度等...... Christoph 解释了我误解规则的原因和位置。谢谢大家。

标签： css twitter-bootstrap css-specificity

【解决方案1】：

仅当不同的规则针对**相同的元素（至于标签的颜色）时，特定性规则才适用，而不是针对不同的元素（即使该元素的某些样式会被继承）。

您有一个样式规则应用于标签，那就是颜色，它可以正确应用。所有其他样式都应用于另一个元素，因此直接针对标签的 TB 样式当然是首选。

某些样式是继承的（例如示例中的字体大小和行高），但一旦有直接针对您的元素的规则，它们就会被覆盖。 TB 使用以下规则覆盖您的字体大小和行高：

label, input, button, select, textarea {
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
}

您可以通过以下声明轻松解决此问题：

div.teaser h1.teaserText label {
     color: #FCCE00;
     font-size:inherit;
     line-height:inherit;
     /* and so on */
}

【讨论】：

“特定规则仅适用于不同规则针对同一个元素”完全正确。

【解决方案2】：

我不太清楚你认为问题出在哪里，但猜测一下：

CSS 特性决定了当有两个或多个规则一个 CSS 属性 给定元素时会发生什么。

所以，给定这个 HTML：

<label class="myLabel">Hello!</label>

还有这个 CSS：

label {
    color: red;
    font-size: 24px;
}

.myLabel {
    color: blue;
}

标签将是蓝色的，因为.myLabel 是比label 更具体的选择器。

不过，标签的字体大小也是 24 像素，因为.myLabel 块不包含设置font-size 属性的规则。

【讨论】：