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 的计算,低于一切其他规则(例:
全局选择符 * )。
|