关于CSS特异性的具体问题

时间:2011-08-23 11:35:30

标签: css css-selectors css-specificity

我对CSS特异性有一个非常具体的问题,这是我无法清楚理解的; http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

如果我有两个定义非矛盾属性/属性的选择器,两个属性是否仍然被应用或它的工作方式是,它只是比较选择器,而不会打扰它们内部定义的内容。

所以,如果我们有;

.menu1 {color:red}
p.menu1 {font-size:10px}

这里两个选择器都引用“menu1”,但是定义了不相关的属性(颜色/字体大小)

所以我的问题是特异性是否仍然重要,只考虑2中的1个?我的问题更多的是如何实际实施。

2 个答案:

答案 0 :(得分:1)

在文章的概述中,第11点说:

  

11。最后定义的规则会覆盖之前存在冲突的规则。

(其中“最后一条规则”可以替换为“最后或最具体的规则”)

因此,如果有不同的属性,则不会覆盖任何内容。两个规则组合在一起,因此p.menu1的字体大小均为10像素,颜色为红色。第二个规则仍然有一个更具体的选择器,但在指定一个可能被覆盖的公共样式之前它根本不相关。

如何在实现中完成所有这些都是一个实现细节,所以我不知道。

答案 1 :(得分:1)

不,在这种情况下,特异性并不重要,因为您只是向menu1类添加一个额外的属性,这不会改变任何现有规则。但是,如果您颠倒规则的顺序并尝试覆盖color

p.menu1 {color:blue}
.menu1 {color:red}

然后不太具体的规则.menu1 {color:red} 覆盖更具体的 p.menu1 {color:blue},即使' '蓝色'规则后出现红色'规则(试一试)。

当然,如果您将第二条规则更改为p.menu1 {color:red},它将覆盖,因为这两条规则具有相同的特异性。