1

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

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

所以,如果我们有;

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

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

所以我的问题是特异性仍然重要吗,只有 2 中的 1 会被考虑?我的问题更多是关于实际实施是如何发生的。

4

2 回答 2

1

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

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

那么不太具体的规则.menu1 {color:red} 不会覆盖更具体 p.menu1 {color:blue}的规则,即使“红色”规则出现在“蓝色”规则之后(试试看)。

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

于 2011-08-23T11:51:39.137 回答
1

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

11. 定义的最后一条规则覆盖任何先前的冲突规则。

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

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

这一切是如何在实现中完成的,嗯,是一个实现细节,所以我不知道。

于 2011-08-23T11:37:39.363 回答