css样式优先权(转载)

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} d iv .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= “” ] ） 、每个伪类（例 :hov er），加 0,0,1,0。   4.每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。   5.其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。   最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比 较。除了 Specificity 还有一些其他规则：    6.!important声明的规则高于一切，如果!important声明冲突，则比较优先权。   7.如果优先权一样，则按源码中“后来者居上”的原则。   8.由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例: 全局选择符 * ）。

转载于:https://www.cnblogs.com/shanfeng/archive/2012/07/12/2587421.html