您的位置：首页 > Web前端 > CSS

css样式优先权(转载)

2012-07-12 09:13 393 查看
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 的计算，低于一切其他规则（例:全局选择符 * ）。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航