css覆盖不起作用？

Question

我有三个标签可以在点击时更改样式。 class="active"为标签提供与标签内容相同的背景，而class="inactive"则有另一种颜色。

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

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

Answer 1

您需要明确设置text-decoration: none;代码的a声明：

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

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

Answer 2

刚刚添加了一些css及其工作的好处。

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

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

看看这个：Fiddle

Answer 3

试试这个..

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

：d

Answer 4

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

无需添加！important

Answer 5

您无法覆盖它的原因是因为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.