Question

我有一些这种格式的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类中，为什么它不起作用？

Answer 1

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

http://jsfiddle.net/PEbRQ/

似乎有用（虽然它是一个嵌入式CSS块，而不是外部文件。

Answer 2

通过style属性应用CSS总是*胜过样式表提供的样式，由于特殊性，正如@Kirean所提到的那样。

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

你可以让你的风格选择器比其他定义更具体，但你必须知道你在竞争什么。

.fooLink比a

更具体

a.fooLink比.fooLink

更具体

span a.fooLink更具体，等等，

根据W3C规范，您的.fooLink选择器可以被任何选择器打败：更多类选择器（.foo .fooLink），相同数量的类选择器和更多类型选择器（{{1} }）或任何带有ID（.foo a）的选择器，假设选择器适用于同一元素。

现在，警告（如上面的星号所示）是您可以使用#foo *覆盖此行为。 !important胜过其他已定义的样式属性。如果有多个!important声明，则会根据标准特殊规则解析它们。

所以，最好的解决方案是让你的风格尽可能具体，并编辑可能有冲突的其他风格。

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

!important

如果放入style =“”则CSS代码有效，如果放入外部css文件则失败

2 个答案: