html - 为什么我的 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

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

• 它必须是一个 ul
• 它必须是最后一个 child

而您的第二种样式只有一个条件:

• 它必须有类 content-message

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

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 上找到的类似文章。