0

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

http://jsfiddle.net/whoiskb/Za2TB/

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

4

2 回答 2

2

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

您将一个样式规则应用于标签，即正确应用的颜色。所有其他样式都应用于另一个元素，因此直接针对标签的 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 */
}​
于 2012-12-13T16:34:18.470 回答
0

我不太清楚你认为问题是什么，但猜测一下：

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

所以，给定这个 HTML：

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

这个CSS：

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

.myLabel {
    color: blue;
}

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

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

于 2012-12-13T16:32:10.173 回答