2010-12-13 13:35



样式优先权问题：


•写法优先权

 从样式写入的位置来看，他们的优先级次序是：行内样式表、内部样式表、外部样式表

•选择符优先权

 id > class > 类型选择符

•样式继承

  XHTML中的子标签会继承部分父标签的样式特征，但有些样式不会被继承，如margin等

•！important语法

 在两行相同类型的class样式定义中，往往优先执行后面一个，例，

.div {
         background-color:red;
         background-color:green;
     }

 使用！Important提升某一样式的优先权。

 

.div {
         background-color:red！important;
         background-color:green;

     }


css优先级的四大原则：


原则一：继承不如指定

原则二：#ID > .class >标签选择符

原则三：越具体越强大


原则四：标签#id >#id ;标签.class > .class   


<div id="id7" class="class7">

 <p id="id8" class="class8"> <span id="id9" class="class9">我是多大字号？</span> </p>


</div>


.class7 p#id8 .class9{font-size:25px}

div.class8 span#id9{font-size:18px}

#id7 .class9{font-size:14px}

.class7 #id8 .class9{font-size:12px}


#id7 #id8{font-size:10px}


四大原则的权重就是: 原则一 > 原则二 > 原则三 > 原则四


关于CSS规则Specificity的计算方式：


 Specificity 具体的计算规则：

  1.元素的 style 样式属性，加 1,0,0,0。

  2.每个ID选择符（#id），加 0,1,0,0。

  3.每个class选择符（.class）、每个属性选择符（例[attr=“”]）、每个伪类（例 :hover），加 0,0,1,0。

  4.每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。

  5.其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。

  最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。除了 Specificity 还有一些其他规则：

  6.!important声明的规则高于一切，如果!important声明冲突，则比较优先权。

  7.如果优先权一样，则按源码中“后来者居上”的原则。

  8.由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例:全局选择符 * ）。