Question

我有以下代码

<style type="text/css">
    .el3 { font-family: Arial, sans-serif; }
    .el1, .el3 { font-family: Tahoma, sans-serif; }
    .el1, .el2, .el3 { font: Helvetica; }
</style>

<div class="el3">Text</div>

当我加载浏览器并使用类el3检查元素时，我发现font-family是Tahoma, sans-serif。

我知道我没有将类.el1和.el2添加到我的HTML中，但我仍然希望结果为Helvetica。当我检查元素时，该裁决被划掉了。

字体应该是Helvetica有两个原因。

特异性公式如下

如果样式是内联的，则添加1磅
为查询中的每个id选择器添加1分
为每个类，属性或伪类选择器添加1个点
为每个元素或伪元素添加1个点

分数通常以括号表示法衡量。在我的例子中，三个规则将给出这三个特异性分数

.el1                    => {0,0,1,0}
.el1,.el2               => {0,0,2,0}
.el1, .el2, .el3        => {0,0,3,0}

定义.el1和.el2应该没有区别。 3个类选择器应该具有比2个类选择器更高的优先级。

第二个原因是即使两者都具有相同的优先权，决胜局也会进入规则3，因为它最后出现。

它也不可能是因为前两个规则我使用font-family属性，而最后一个使用font。

根据优先规则，字体应显然为Helvetica。

Answer 1

问题不是特异性，而是有效性。根据给定的规则：

.el3 { font-family: Arial, sans-serif; }
.el1, .el3 { font-family: Tahoma, sans-serif; }
.el1, .el2, .el3 { font: Helvetica; }

最后一个未被应用，因为它被视为无效。您可以通过测试确认：

.el3 { font: Arial, sans-serif; }
.el1, .el3 { font: Tahoma, sans-serif; }
.el1, .el2, .el3 { font: Helvetica; }

没有应用任何字体系列。这似乎与如何验证速记属性（如font）有关。如果我将第二组测试规则更改为：

.el3 { font: 1em Arial, sans-serif; }
.el1, .el3 { font: 1em Tahoma, sans-serif; }
.el1, .el2, .el3 { font: 1em Helvetica; }

然后应用最后一条规则。这似乎与CSS spec on shorthand properties相反，MDN doc on the font property实际上警告说，使用速记而不指定所有属性将导致属性被视为设置为属性的初始值：

除非另有说明，否则从速记表格中省略值   定义后，每个“缺失”的子属性都会被赋予其初始值。

这意味着速记属性声明总是设置所有   它的子属性，甚至是未明确设置的子属性。的 漫不经心   使用 ，这可能会导致无意中重置某些内容   子属性。 小心使用 ，速记可以保证“空白”   平板“通过重置子属性无意中从其他级联级联   源。例如，写背景：绿色而不是   background-color：green确保背景颜色覆盖   可能已将背景设置为的任何早期声明   图像与背景图像。

但我认为既然规则根本没有被应用，那么客户端（浏览器）就会处理速记属性，只有一个单一属性被设置为无效。

进一步的发现：

我不确定他们的来源是什么，但font property specification确实明确地提到了这个问题：

注意：使用CSS字体速记时有一些注意事项。的 如果   这些条件不符合，财产无效且完全属于   忽略。


除了使用关键字 之外，必须定义font-size和font-family属性的值 。

并非所有font-variant值都允许。只允许CSS 2.1中定义的值，即普通和小型上限。

虽然不能通过字体直接设置，但font-stretch，font-size-adjust和font-kerning的值也会重置为初始值   值。

值的顺序不是完全免费的：必须先定义font-style，font-variant和font-weight，如果有的话，   字体大小值。必须立即定义行高值   在font-size之后，前面是强制/。最后   font-family是必需的，必须是最后定义的值（继承   价值不起作用。）

来自Spec的
来源：

如果您查看https://github.com/mirage/ocaml-base64，则会有以下内容：

价值：[[＆lt;＆＃39; font-style＆＃39;＆gt; || ＆LT;＆＃39;字体变量＆＃39;＆GT; || ＆LT;＆＃39;字型重量＆＃39;＆GT; ]？＆LT;＆＃39;字体大小＆＃39;＆GT; [/＆lt;＆＃＆gt;行高＆＃39;＆gt; ]？＆LT;＆＃39;字体家庭＆＃39;＆GT; ] |标题| 图标|菜单|消息框|小字幕|状态栏|继承

对于那些能够看到EBNF（不是我）的人来说，可以看到速记需要设置（关键字）或（font-size和font-family）才能被认为是有效的。上面的语法看起来有点像：

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ] ? <'font-size'> [ / <'line-height'> ] ? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

CSS特异性不遵循公式

1 个答案:

进一步的发现：

来源：