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
必须是最后一个孩子

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

必须有类内容消息

为了使第二种风格与第一种风格一致，您需要添加另一种条件：

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

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

带有！important
带有！important
没有！重要的内联样式
包含id（#myItem）
类，标记名称，伪类等。

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

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

Answer 2

请参阅此文章，其中介绍了css特定问题 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

偏好顺序 - 元素选择器＆lt;类选择器＆lt; id选择器

因此将其指定为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 3

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

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

3 个答案: