-3

我有一些这种格式的html：

<ul id="foo">
    <li class="bar"><a href="#">Reports</a>
      <span>
        <a href="#" class="fooLink">First Report</a>
        <a href="#" class="fooLink">Second Report</a>
     </span>
  </li>
</ul>

本质上，我希望菜单中的“报告”链接在单击时展开，并在其下方显示链接，填充到一侧，因此它看起来像这样：

Reports
   First report
   Second report

这是我的 CSS 代码：

.fooLink
{
    padding-left: 20%; 
    padding-top: 0px;
    display:block;
}

但是，这不起作用。如果我检查 firebug 中的链接，我会看到该display:block;行被阻塞。但是，如果我这样做：

<a href="#" 
   style="padding-left:20%; padding-top:0px; display:block;">Second Report</a>

然后它可以按我的意愿工作。如果我把它放在 css 类中，为什么它不起作用？

4

2 回答 2

2

检查您的其他 CSS 声明中是否存在冲突样式，并密切注意Specificity。Firebug 应该为您提供实际应用的 CSS，以及它的来源。

http://jsfiddle.net/PEbRQ/

似乎可以工作（尽管它是一个嵌入式 CSS 块，而不是外部文件。

于 2012-05-02T23:17:16.277 回答
1

正如@Kirean 所提到的，由于特殊性，通过属性 always* 应用 CSSstyle胜过通过样式表提供的样式。

这意味着当您将 CSS 移动到外部样式表时，它必须与其他定义的样式竞争。

您可以使您的样式选择器比其他定义更具体，但您必须知道您要与什么竞争。

.fooLink比更具体a

a.fooLink比更具体.fooLink

span a.fooLink仍然更具体，等等，等等

根据 W3C 规范，如果.fooLink选择.foo .fooLink器适用于相同的元素。.foo a#foo *

现在，需要注意的是（正如上面的星号所暗示的），您可以使用!important. !important胜过其他定义的样式属性。如果有多个!important声明，则根据标准特异性规则对其进行解析。

因此，最好的解决方案是使您的样式尽可能具体，并编辑其他可能相互冲突的样式。

但是，如果其他定义超出您的控制范围（站点范围的 CSS 样式表或类似的东西），请使用!important：

.fooLink
{
    padding-left: 20%; 
    padding-top: 0px;
    display:block !important;
}
于 2012-05-02T23:33:31.077 回答