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

我有以下按此顺序编写的 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 的 margin-bottom 为 0。有人能解释一下这是为什么吗？还 有什么办法可以解决这个问题吗？

它是按照具体顺序完成的。在本例中，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 http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html或在 Google 上找到的类似文章。