2

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

4

3 回答 3

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

于 2012-11-30T08:59:58.643 回答
0

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

偏好顺序- 元素选择器<类选择器<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。惊讶地发现这不会发生在你身上。

于 2012-11-30T08:58:05.200 回答
-1

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

于 2012-11-30T09:07:40.343 回答