Question

我正在使用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 bootstrap的外部链接）

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特性规则。

Answer 1

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

您有一个样式应用于标签，这是正确应用的颜色。所有其他样式都应用于另一个元素，因此当然首选直接定位标签的TB样式。

某些样式是继承的（如示例中的font-size和line-height），但只要有直接定位元素的规则，它们就会被覆盖。 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 */
}

Answer 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属性的规则。

CSS特异性规则

2 个答案: