css小问题

Question

<div class="nav1">
                <ul>
                    <li class="active"><a href="news.html">a</a></li>
                    <li><a href="news.html">b</a></li>
                    <li><a href="products.html">c</a></li>
                    <li><a href="praise.html">d</a></li>
                    <li><a href="media.html">e</a></li>
                </ul>

            </div>

.nav1 li a{
    color: #555;
}

.active a{
    color: red;
}

这样写

a

“a”不是红色，在后面加上！important后才是，请教问题出在哪里，继承的优先级？

Answer 1

第一个的优先级：10+1+1
第二个的优先级：10＋1
!important声明的样式优先级最高，如果冲突再进行计算。

以下是规则：
元素标签中定义的样式（Style属性） 1,0,0,0
每个ID选择符(如 #id) 0,1,0,0
每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover) 加0,0,1,0
每个元素选择符（如p）或伪元素选择符(如 :firstchild)等 加0,0,0,1
其它选择符包括全局选择符*，不计算在其中 相当于0,0,0,0

注意
!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。

Answer 2

因为.nav1 li a的权重大于.active a
找了个轮子： http://www.cnblogs.com/rubylouvre/archive/2010/03/17/1687786.html

Answer 3

权重问题
.nav1 li a{
color: #555;
}

.nav1 li.active a{
color: red;
}

Answer 4

CSS:权重和层叠规则决定了其优先级,按照权重的计算规则，

.nav1 li a{
    color: #555;
}

其权重是0.0.1.2(12)

.active a{
    color: red;
}

其权重是0.0.1.1(11)
所有前一个selector的权重高，在后一个selector中加入important会提升其权重

Answer 5

是权重问题，CSS样式中可以用数值来计算样式权值，标签样式权值是1，类选择器是10，ID选择器权值是100，若计算之后出来一样，就以就近原则来生效，另外！important声明的样式优先级最高。
所以上面你的代码权值分别是：
.nav1 li a 10+1+1=12；
.active a 10+1=11；
因此，a显示不是红色。

Answer 6

.nav1 li a{
color: #555;
}

.active a{
color: red;
}
去掉两者中一个
代码读取会从上到下，先显示#555这个颜色，然后浏览器又发现red这个颜色，直接跳过，如果加上!important就增加优先级，浏览器看到他时就会将#555换成red了

Answer 7

选择器特殊性可以按照 0.0.0.0 的方式来计算，从左到右分别为内联样式，ID选择器，类、伪类和属性选择器，元素和伪元素选择器，出现了哪个选择器就在相应的位数上加1，左边的优先级大于右边，通配符和连接符没有特殊性，不计算。另外，!important优先级最高，如果有冲突则选择最后出现的样式声明～