CSS特定规则

我正在使用twitter bootstrap（TB），看起来他们的CSS规则优先于他们不应该。我创造了这个小提琴，借以说明问题：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，因为我哈哈ve 3个html选择器和2个类别选择器，每个应该得到10个值。正如你可以在提琴中看到的那样，虽然TB css定义中的标签选择器是优先的。

有人可以解释我在这里失踪了吗？

顺便说一句，我知道我可以用！重要的标签来解决这个问题，我只是想更好地理解CSS特异性规则。

来源

2012-12-13 Kevin

我很困惑。很明显，第二种风格更具体，因为它与最终的“标签”完全相同。 – gotohales

首先我需要知道你的期望。我在小提琴中看到的是TEXT TEXT TEXT是黑色和100px尺寸。标签和活动是正常的字体大小和黄色。即它正在拾取字体族，文本转换和颜色。 –

“我知道我可以使用'！important'标签来解决这个问题” - 不是在我的代码中你不能。 “重要”也不是标签，我认为这不会有什么区别。 –

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

您有一个stylerule应用于标签，这是正确应用的颜色。所有其他样式都应用于其他元素，因此当然首选直接针对标签的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-13 16:34:18 Christoph

“只有当不同规则指向同一元素时，特殊性规则才适用”正确。 – BoltClock

我不是你想的问题，但服用一种猜测十分清楚：

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-13 16:32:10

回答

相关问题