Firebug中缺少CSS规则中的样式

时间:2012-09-12 22:52:45

标签: css firebug

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

firebug中有一个空的CSS规则。我知道如果某个样式被覆盖,那么样式就会被克服,但我不确定如果css规则中缺少样式,这意味着什么。我创建了规则以影响下面元素的填充顶部。

<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;
}

1 个答案:

答案 0 :(得分:1)

你的风格似乎相互重叠。您可能想要研究如何更好地使用CSS中的继承规则。

除此之外,请尝试重新编写您的规则:

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

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