Question

我想这对你来说相当简单，但我无法绕过它。我撕掉了重要的部分。我在#content里面有文字，所以我不能改变它，我不想使用！重要标签。 css按照它放在我的css文件中的顺序显示。

为什么“#content h2 a，＃content h2 a：visited”会覆盖.post-header h2 a？

<html>
    <head>
    .....
    </head>
    <div id="content">
    .....
        <div class="post-header">
            <a href="#">my text</a>
        </div>
    </div>
</html>


#content h2 a, #content h2 a:visited {
    font-family:"arial black","lucida console",sans-serif;
}

.post-header h2 a {
    font-family:Arial,sans-serif;
}

/乔尔

Answer 1

首先，浏览器检查cascading order。由于声明都是针对相同的媒体，重要性和起源，因此规则是按特定顺序排列的。

接下来，浏览器会计算the selector's specificity，并且（这是您问题的重要部分）Id选择器的优先级高于类选择器：

计算选择器的特异性   如下：


如果声明来自的是1，则为“样式”属性，而不是带选择器的规则，为0   否则（= a）（在HTML中，元素的“样式”属性的值是样式表规则。这些规则没有选择器，因此a = 1，b = 0，c = 0，d = 0.）

计算选择器（= b）
中的ID属性数
计算选择器（= c）
中其他属性和伪类的数量
计算选择器中的元素名称和伪元素的数量（= d）


特异性仅基于   选择器的形式。特别是，a   “[id = p33]”形式的选择器是   算作属性选择器（a = 0，   b = 0，c = 1，d = 0），即使是id   属性被定义为中的“ID”   源文件的DTD。

连接四个数字a-b-c-d（在具有大碱基的数字系统中）给出了特异性。

Answer 2

id比class更具体。在你的情况下，你可以在课前添加id。

#content .post-header h2 a {
    font-family:Arial,sans-serif;
}

Answer 3

您可以使用以下内容：

.post-header h2 a {
    font-family:Arial,sans-serif!important;
}

为CSS规则添加额外的优先级，并确保它覆盖任何其他规则。

Answer 4

基于ID的选择器优先于基于类的选择器。

如果您希望基于类的样式覆盖ID选择器，请在元素样式中添加！important。

.post-header h2 a {
    font-family:Arial,sans-serif !important;
}

！重要的是在IE6中不起作用，如果你关心那些事情。

基本的CSS麻烦

4 个答案: