CSS的特异性没有遵循公式。

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的元素时，我发现字体系列是Tahoma, sans-serif。

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

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

具体的公式如下

1. 如果样式是内联的，则添加1点
2. 为查询中的每个id选择器添加1点
3. 为每个类、属性或伪类选择器添加1点
4. 为每个元素或伪元素添加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规范相反，后者实际上警告说，使用速记而不指定所有属性将导致属性被视为设置为属性的初始值：

当从速记表单中省略值时，除非另有定义，否则每个“缺失”的子属性都分配其初始值。 这意味着速记属性声明总是设置它的所有子属性，甚至那些没有显式设置的子属性。不小心使用了，这可能会导致无意中重置某些子属性.小心地使用了，一种简写可以通过重置子属性来保证一个“空白板”，而这些子属性在无意中从其他源级联。例如，编写背景:绿色而不是背景色:绿色确保背景颜色覆盖可能已经将背景设置为具有背景图像的图像的任何早期声明。

但我认为，由于该规则根本不适用，因此客户端(浏览器)正在处理速记属性，只有一个属性被设置为无效。

进一步的调查结果：

我不知道它们的来源是什么，但是字体属性上的MDN文档确实明确地提到了这个问题：

注意:在使用CSS字体速记时有几个注意事项。如果不满足这些条件，则该属性无效，将被完全忽略。

• 除非使用关键字，必须同时定义字体大小和字体族属性的值。
• 并非所有字体变体的值都被允许.只允许CSS2.1中定义的值，这是正常的和小型化的.
• 虽然字体不能直接设置，但字体拉伸、字体大小调整和字体角化的值也被重置为它们的初始值。
• 值的顺序不是完全免费的:字体样式、字体变体和字体权重必须在字体大小值之前定义，如果有的话。行高值必须在字体大小之后立即定义，前面必须是强制的/.最后，字体系列是强制性的，必须是定义的最后一个值(继承值不起作用)。

资料来源：

如果您查看性能规格，它有以下内容：

值：[<‘字体样式’><<‘字体-变种’><‘字体-重量’>>？<‘字体大小’>/<‘字体-高度’>？<‘字体-家庭’><‘字体-家庭’>><‘字体-字体-家庭’>><‘字体-字体-家庭’><‘字体-样式’>-<‘字体-类型的’>/<‘字体-高度’>？<‘字体-家庭’>><‘字体-家庭’>

对于任何能看懂EBNF (不是我)的人来说，这意味着速记需要设置(关键字)或(字体大小和字体系列)才能被认为是有效的。上面的语法看起来有点像：

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