我想这对你来说相当简单,但我无法绕过它.我撕掉了重要的部分.我在#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;
}
/乔尔
首先,浏览器检查级联顺序.由于声明都是针对相同的媒体,重要性和来源,因此规则是按特定顺序排列的.
接下来,浏览器计算选择器的特异性,并且(这是您问题的重要部分)Id选择器的优先级高于类选择器:
选择器的特异性计算如下:
- 如果声明来自的是一个'style'属性而不是一个带选择器的规则,则为1;否则为0(= a)(在HTML中,元素的"style"属性的值是样式表规则.这些规则没有选择器,所以a = 1,b = 0,c = 0,d = 0.)
- 计算选择器中ID属性的数量(= b)
- 计算选择器中其他属性和伪类的数量(= c)
- 计算选择器中元素名称和伪元素的数量(= d)
特异性仅基于选择器的形式.特别是,"[id = p33]"形式的选择器被计为属性选择器(a = 0,b = 0,c = 1,d = 0),即使id属性被定义为"ID" "在源文档的DTD中.
连接四个数字abcd(在具有大基数的数字系统中)给出了特异性.
id比类更具体.在您的情况下,您可以在课前添加id.
#content .post-header h2 a {
font-family:Arial,sans-serif;
}