具有“活动”链接的文本颜色类 [英] Text color of link with "active" class
问题描述
我有一个导航栏,我需要活动页面,在li元素上标记为subactive类有白色文本而不是黑色。您可以在此处找到HTML和CSS: http://jsfiddle.net/a4hBz/
I have a navigation bar, and I need the active page, marked by "subactive" class on the li element to have white text instead of black. The HTML and CSS can be found here: http://jsfiddle.net/a4hBz/
我在CSS中使用.subactive选择器上的颜色,但浏览器忽略它。
I use color on the .subactive selector in CSS, but its ignored by the browser.
推荐答案
这主要是由于CSS权衡了风格。 ID 始终比标准标记名称,类名称或伪类别具有更多的信心。一个简单的解决方案是对锚点类应用活动样式作为特定的,因为你是与其余的标准元素。基本上:
That's largely due to how CSS "weighs" the styles. IDs always have more presidence over a standard tag name, class name or pseudo-class. A simple solution is to be as-specific with your anchor class applying the "Active" styling as you are with the rest of the standard elements. Basically:
.subactive a
应该成为
#sidenav .subactive a
如果这对你的模式不起作用,你需要转动 #sidenav
加入课程,或以其他方式解决。
If that doesn't work for your schema, you'll need to either turn #sidenav
in to a class, or work-around it some other way.
顺便说一句,我之前提到的是一个样式的特异性。因为目前的样式,您的样式重量如下:
By the way, what I was referring to earlier is a style's specificity. As it currently stands, your styles weigh in like so:
#sidenav a a=0, b=1, c=0, d=1 -> specificity = 0,1,0,1
.subactive a a=0, b=0, c=1, d=1 -> specificity = 0,0,1,1
#sidenav .subactive a a=0, b=1, c=1, d=1 -> specfiicity = 0,1,1,1
几乎想到这样:
(a * 1000) + (b * 100) + (c * 10) + d
具有最高数字的样式胜出。
The style with the highest number wins.
这篇关于具有“活动”链接的文本颜色类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!