css - CSS覆盖不起作用？

Question

我有三个在单击时会更改样式的选项卡。class="active"为选项卡提供与选项卡内容相同的背景，同时class="inactive"具有另一种颜色。

我的问题是选项卡上的文本，CSS 有点奇怪。默认状态class="active"看起来应该是这样，而非活动选项卡带有下划线，即使我的 CSS 说text-decoration: none !important;并且单击的活动选项卡文本变得格外粗体（或者可能是阴影）。

请看我的小提琴：http: //jsfiddle.net/m8wQM/170/

score 2 · Accepted Answer

您需要为您的标签显式设置text-decoration: none;声明：a

.ui-btn {
     text-decoration: none; /*nope, no need for !important*/
}

这是您的演示的一个小工作版本：little link。

score 1 · Accepted Answer

刚刚添加了一些 css 并且它的工作良好。

#navbar ul li a
{
  text-decoration: none !important;  
  text-shadow: none !important;
}

（text-decoration从活动和非活动中删除，因为您在任何情况下都不想要它）

看看这个：小提琴

score 1 · Accepted Answer

1

试试这个..

#navbar ul li a {
    text-decoration: none;
}

:D

于 2012-09-06T09:36:24.640 回答

score 1 · Accepted Answer

1

.ui-btn {text-decoration: none;}

无需添加 !important

于 2012-09-06T09:37:20.560 回答

score 1 · Accepted Answer

您无法覆盖它的原因是 CSS 值的计算方式。

CSS 计算是否覆盖的方式由选择器组成。

 1. ID: 100 points.
 2. Class: 10 points.
 3. Tag name: 1 point.

为了覆盖 css 规则，选择器的计算值必须高于前一个。

例子：

<div id="id" class="class"></div>

#id { background: blue; } - 100 point rule.
.class { background: red; } - 10 point rule.

上面的 div 将保持蓝色，因为 id 的选择器要高得多。

为了推动更改，您可以添加 !important 标记，或确保 .class 规则获得更高的分数等，方法是添加：

#parent .class { background: red; } - 110 point rule.

5 回答 5