css 优先级

css优先级很重要，可能因为优先级会造成一些语句没有作用，所以一定要明白css优先级。

首先优先级的原则。

（1）继承不如指定

（1）#id > .class > 标签选择符

（1）越具体越强大

（1）标签#id >#id ; 标签.class > .class

CSS优先级包含四个级别（标签内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。

根据这四个级别出现的次数计算得到CSS的优先级。

CSS优先级的计算规则如下：

（1）元素标签中定义的样式（Style属性）,加1,0,0,0

（2）每个ID选择符(如 #id),加0,1,0,0

（3）每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0

（4）每个元素选择符（如p）或伪元素选择符(如 :firstchild)等，加0,0,0,1

将这四个数字分别累加，就得到每个CSS定义的优先级的值，然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。

例子

1. h1 {color: red;}
 /* 一个元素选择符，结果是0,0,0,1 
2. body h1 {color: green;} 
/* 两个元素选择符，结果是 0,0,0,2 
3. h2.grape {color: purple;} 
/* 一个元素选择符、一个Class选择符，结果是 0,0,1,1
4. li#answer {color: navy;}
 /* 一个元素选择符，一个ID选择符，结果是0,1,0,1  
元素的style属性中如下定义h1 {color: blue;}
 /* 元素标签中定义，一个元素选择符，结果是1,0,0,1
h1 {color: blue;}
/* 元素标签中定义，一个元素选择符，结果是1,0,0,1

猜你喜欢