CSS样式覆盖
2016-12-07 本文已影响63人
程非池的小软
CSS样式覆盖
1.根据引用方式确定优先级
- 外部链接
- 写在style标签里
- 内联属性
以上三种方式引入的css，优先级依次提高,优先级高的覆盖优先级低的。
2.后写覆盖先写
在同一个级别里，后写的覆盖先写的。
//这是写在外部文件style.css里的
h1 {
color: #ffffff;
}
h1 {
color: #dddadd;
}
//这是写在html里的
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>我的颜色到底是啥？</h1>
</body>
在这里h1的颜色的是#dddadd
3.选择器优先级
在选择器不同的情况下，我们给每种选择器制定一个权值，计算命中一个元素的所有选择器的总权值，值高者获胜.
- 元素选择器： 1
- 类选择起器： 10
- ID选择器： 100
- 内联选择器： 1000
#nav .current a{ }
该选择器的权值为100 + 10 + 1 = 111
//html部分
<section id="content">
<p class="abstract">这里是Abstract</p>
<p>这里是普通的</p>
</section>
//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
