精通css(3)-优先级那些事儿

同一个元素可能会有多个样式,这些样式很可能会冲突,css通过层叠的过程来处理这种冲突,简单的说就是给每个规则分配一个重要度。

1.层叠

层叠重要度从高到低排列顺序:

1.标有!important的用户样式;

2.标有!important的作者样式;

3.作者样式;

4.用户样式;

5.浏览器/用户代理默认样式;

2.优先级的计算

一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。通常我们用1表示标签名选择器的优先级,用10表示类选择器的优先级,用100标示ID选择器的优先级。直接在网页中用sytle="...."的优先级最高,为1000,但是不推荐这样用,你懂的。举个例子:

    div.test1 .span p{...} 优先级= 1+10 +10 +1  
    span#xxx .songs li {...}优先级=1+100 + 10 + 1  
    #xxx li {...}优先级= 100 +1 
另外,伪元素的优先值同html 其他元素,伪类的优先值与类的计算一样,还有类似["id=content"]这样的选择器,也跟类的级别一样。

3.继承

继承就是应用样式的元素后代会继承样式的某些属性。这句话很容易理解,但是"某些属性"有些坑啊,你特么到底是哪些属性啊?

首先要明确一点:直接应用于元素的任何样式都会覆盖继承而来的属性。比如你对body设置了font-size:10px;的属性,但是h1,h2都不听你的,因为浏览器默认给h1,h2设置了字体大小,覆盖了继承而来的样式。

然后网页中用到的继承大多都是文本方面的继承,比如font-size,font-color之类的。边框类的属性是不能继承的,比如border,margin,padding什么的,这个要是能继承网页就完蛋了。

有些浏览器在继承方面还有些问题,比如说高贵冷艳的IE,在继承表格字号方面会有些问题。总的来说,在写代码的时候除了文本继承外,其他的都不要指望用继承了,直接用选择器会更好些。



上一篇:pyramid学习笔记0-准备工作


下一篇:企业级SaaS的降温是在积蓄下一次爆发的能量