css小笔记之多重样式优先级深切概念分分快三计

作者:分分快三计划

但是!important在ie6这种垃圾浏览器下会出现小bug

      color:blue   !important;

多重样式优先级深入概念
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。
下列是一份优先级逐级增加的选择器列表:
a.通用选择器(*)
b.元素(类型)选择器
c.类选择器
d.属性选择器
e.伪类
f.ID 选择器
g.内联样式
h.!important 规则例外
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。
一些经验法则:
Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
Only 只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important
Never 永远不要在全站范围的 css 上使用 !important
Never 永远不要在你的插件中使用 !important
CSS 优先级法则:
A 选择器都有一个权值,权值越大越优先;
B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
D 继承的CSS 样式不如后来指定的CSS 样式;
E 在同一组属性设置中标有"!important"规则的优先级最大;

.testClass{ 
color:blue !important;
color:red;
}
这种情况下,实际的color是red

 

分析:通配符选择器会拿到界面上的所有标签,它当然会拿到p标签,它既然能拿到p标签,它当然也算是直接选中的

!important用于将当前css代码优先级提升为最高,这个优先级比行内样式更高

分分快三计划 1分分快三计划 2

}

4.important必须写在分号的前面,如果这么写;!important分号以后是没有任何效果的

我们在id和class中同时设置了两个字体大小的属性,正常的优先级是先执行id选择器,结果我们使用了!important,提升了class选择器的优先级,但是只能提升class选择器中被选中的属性,而未被选中的不能提升,还是执行以前的id字体大小的属性。

  color:red  !important;  分号写在最后

注意点:

分分快三计划 3分分快三计划 4

1.什么是important

作用:用于提升某个直接选中标签的选择器中的某个属性的优先级,可以将被指定的属性的优先级提升为最高。

2.通配符选择器选中的标签也是直接选中的

  *{

p{

直接将p标签选择器提升为最高

3.!important只能提升被指定的属性的优先级,其它的属性的优先级不会被提升

分分快三计划 5分分快三计划 6

我们来验证一下将!important加在间接属性身上有没有效果

}

分分快三计划 7分分快三计划 8

5.还有important前面的感叹号是不能省略的

1.important只能用于直接选中,不能用于间接选中

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 随笔