为什么我的 HTML 不使用 CSS 中定义的最后一个样式？

Question

我有以下按此顺序编写的 CSS：

h2:last-child, p:last-child, ul:last-child {
margin-bottom: 0;
}

.content-message {
   margin: 20px -1.667em -1.667em -1.667em;
   margin-bottom: -1.667em;
}

还有我的 HTML：

<ul class="content-message">
    <li>xx</li>
</ul>

当我检查时，我可以看到 ul 从第一个开始就获得了它的样式 CSS 并且它的边距底部为 0。有人可以解释为什么会这样。还 有没有办法解决这个问题。

Answer 1

请参阅这篇描述 css 特定性问题的文章-http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

偏好顺序- 元素选择器

因此将其指定为 Id 属性应该可以工作

   #content-message {
   margin: 20px -1.667em -1.667em -1.667em;
   margin-bottom: -1.667em;

和<ul id="content-message">

更新-在您的情况下，无论上述情况如何，您的内联样式-style="margin-bottom: -1.667em;" 将覆盖任何其他 css。惊讶地发现这并没有发生在你身上。

Answer 2

它是按照具体的顺序完成的。在这种情况下，ul:last-child 更具体，因为它有两个条件：

• 必须是 ul
• 必须是最后一个孩子

而你的第二种风格只有一个条件：

• 它必须有类内容消息

为了使第二种样式与第一种样式一样具体，您需要添加另一个条件：

ul.content-message {
   margin: 20px -1.667em -1.667em -1.667em;
   margin-bottom: -1.667em;
}

因为这两个规则同样具体，所以第二个规则优先，因为它写在最后。请注意，这是对 css 特异性的简化 - 排序的工作方式如下：

1. 带有 !important 的内联样式
2. 带有 !important 的样式表样式
3. 不带 !important 的内联样式
4. 包含 id (#myItem) 的选择器
5. 类、标签名、伪类等

列表上方的任何选择器都将具有优先权，而同一级别的两个选择器将由该类型的数量决定（因此两个类不如 id 特定，但与样式和一个标签）。两种样式的权重相同，将遵循最后定义的样式。

我可能对第 5 点中所有具有相同权重的项目都错了，但为了更好地理解，请查看 http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html 或在 Google 上找到的类似文章。

Answer 3

请在您要应用的样式上加上“！重要”标记。