“*”在CSS特异性中出现最高，为什么？

Question

我无法理解为什么我的CSS没有根据我理解特异性规则的方式进行样式设置。根据我在网上的阅读（包括this calculator），*（匹配所有内容）没有特异性，而一个元素（例如h1，h2等）是第四重要的，而一个班级是第三重要的。但这不是我在Chrome调试器中看到的。

从它的外观来看，*已经排在最前面，然后是h5，然后是另外两个*匹配，然后匹配类.orange }。 *不应该追求其他一切吗？ .orange不应该胜过h5吗？发生了什么事？

Answer 1

在您的示例中，*是唯一匹配相关元素的选择器。

其他样式仅由其他元素的定义继承。这些其他元素与您的元素在父上下文中。

根据你的屏幕截图，它必须是some-element这样的结构：

<div class="row orange">
    <div class="col-xs-10">
        <h5 class="detail1">
            <some-element></some-element>

关于你的元素，继承的样式根本没有任何特异性。特异性是一个适用于 CSS选择器的概念，而不是 CSS属性。

  

Specificity of inherited CSS properties