Question

所以，我的id选择器有一个颜色！important被一个简单的.class h1选择器覆盖，没有！important。我很困惑，无法找到任何关于此的信息。

我知道css的特异性，无论我如何看待它，我都希望h1即使没有！重要也是绿色的。

HTML：

<body id='id'>
  <div class='class'>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</body>

CSS：

.class { color: black; }
.class h1 { color: red; }
#id { color: green !important; }

我已在OS X 10.9.1上的最新Chrome，Safari和Firefox中测试过此行为

Answer 1

您的.class h1规则正在将颜色直接应用于h1元素本身，因此它永远不会继承body的颜色。 !important仅影响body元素，因为它是具有ID的元素。它不会强制子元素继承该值。由于您的选择器针对不同的元素，因此特异性也变得无关紧要。

事实上，!important在您的代码中没有任何作用，因此应将其删除。

Answer 2

仅当应用于同一元素时，该特定内容才有意义。

您的规则针对3个不同的元素，因此没有冲突..每个元素都是根据自己的规则绘制的。

上的文档