css - Firebug 中缺少 CSS 规则中的样式

Question

如果在 css 规则中缺少样式，这意味着什么？它对元素也没有影响。

firebug 中有一个空的 CSS 规则。我知道如果某种样式被覆盖，样式就会被交叉，但我不确定如果样式在 css 规则中丢失是什么意思。我创建了规则来影响下面元素的 padding-top。

<div id="leadspace-head" class="alternate">
  <div id="leadspace-body">
    <ul id="navigation-trail">
      <li>test</li>
    </ul> 
    <h1 class="small">Title for this page</h1>
  </div>
</div>

这是场景。对于上面的 html 代码，我在下面有 3 个 css 规则。第一个在主体内部，另外两个规则可以在 css 文件中找到。第二条规则覆盖第三条规则。我添加了第一条规则来覆盖第二条规则，但它没有任何效果，并且在 Firebug 中显示空规则。

正文中的 CSS

.landing-page #leadspace-head.alternate #navigation-trail + h1 {
  padding-top: 9px !important;
}

mystyle.css 中的 CSS

.landing-page #leadspace-head.alternate #navigation-trail + h1 {
  padding-bottom: 10px;
  padding-top: 9px;
}

.landing-page #leadspace-head #navigation-trail + h1 {
  padding-top: 5px;
}

Answer 1

你们的风格似乎经常互相压倒。您可能想研究如何更好地利用 CSS 中的继承规则。

除此之外，尝试将您的规则重写为:

#navigation-trail h1.small { padding-top: 9px; }

这将专门针对属于您的#navigation-trail 列表元素的那些 H1 元素。