CSS样式覆盖

CSS样式覆盖

1.根据引用方式确定优先级

• 外部链接
• 写在style标签里
• 内联属性

以上三种方式引入的css，优先级依次提高,优先级高的覆盖优先级低的。

2.后写覆盖先写

在同一个级别里，后写的覆盖先写的。

//这是写在外部文件style.css里的
h1 {
     color: #ffffff;
}

h1 {
     color: #dddadd;
}

//这是写在html里的

     


    
我的颜色到底是啥？

在这里h1的颜色的是#dddadd

3.选择器优先级

在选择器不同的情况下，我们给每种选择器制定一个权值，计算命中一个元素的所有选择器的总权值，值高者获胜.

• 元素选择器： 1
• 类选择起器： 10
• ID选择器： 100
• 内联选择器： 1000

#nav .current a{ }

该选择器的权值为100 + 10 + 1 = 111

//html部分

     
这里是Abstract
     
这里是普通的

//CSS部分
#content p {
    color: red
}

.abstract {
    color: black;
}

p的color属性是:red

因为#content p是ID选择器和元素选择器 权值101=100+1， .abstract是类选择器 权值为10，所以p的color属性是red.

4.important

在任何情况下，只要在样式上加了important，则他优先级最高，前面所有的规则都忽略 。

本文内容参考www.codefordream.com