Question

我想提高选择器的特异性

//HTML        
<input type="button" class="button filled" class="button icon" value="Learn More">

//CSS
.button.filled button.icon
{

}

Answer 1

这是无效的HTML：

<input type="button" class="button filled" class="button icon" value="Learn More">

一个元素中不能有多个class=""属性，这在HTML中是非法的：

当用户代理离开属性名称状态时（如果合适，在发出标签令牌之前），必须将完整的属性名称与同一令牌上的其他属性进行比较； 如果令牌上已经存在一个具有完全相同名称的属性，则这是解析错误，必须删除新属性以及与之关联的值（如果有）。

因此，浏览器将仅遵循第一个class属性（在您的情况下为class="button filled"，而忽略class="button icon"属性）。这可以解释为什么您没有看到预期的行为。

无论如何，您只需要一个class="button filled icon"属性和选择器.button.filled.icon。

您可能还想使用input[type=button].icon。

也就是说，您应该避免使用<input type="button">和<input type="submit">，而应使用<button type="button">和<button type="submit">，因为它们可以让您指定内部内容和单独的value=""属性。