2012-09-06 82 views
0

我有三个选项卡,可以在单击时更改样式。 class="active"为选项卡提供与选项卡内容相同的背景,而class="inactive"具有另一种颜色。css覆盖不工作?

我的问题是标签上的文字,CSS的东西很奇怪。 class="active"的默认状态看起来应该是这样,而非活动标签下划线,即使我的CSS说text-decoration: none !important;和点击的活动标签文本变得特别粗体(或者它可能是一个影子)。

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

+1

使用'important'是不好的做法,直到你没有任何选择。 –

回答

1

只是增加了一些CSS和它的工作好。

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

(从有效和无效删除text-decoration,因为你不希望它在任何情况下)

看一看这样:Fiddle

+1

请在答案中提及这些更改。 –

+0

谢谢!我正在用这个。 – Karin

1

试试这个..

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

:D

2

您需要明确设置text-decoration: none;声明您a标签:

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

这是你的演示的一个小工作版本:little link

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

无需添加!重要

1

的原因,你不能忽略它是因为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选择要高得多。

为了通过推变化,您可以添加重要的标记,或者确保规则的.class加入实现了更高的得分点,等:!

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