在实际开发中，经常有定制样式的需求，时不时会出现CSS不生效或者被覆盖的情况，因此需要了解CSS样式的优先级。
样式的覆盖
示例：
1
| <p id="thisId" class="thisClass" style="">这是一个CSS选择器的测试</p>
|
那么有多少种CSS选择器可以对<p>标签样式产生影响呢？
- 行内样式：
style = "font-size: 12px"；
- id选择器：
#thisId {font-size: 12px;}
- class选择器：
.thisClass {font-size: 12px;}
- 元素选择器：
p {font-size: 12px;}
规则如下：
- 根据引入方式确定优先级，优先级由高到低依次为：
内联属性——>写在style标签里——>外部链接
- 后写的覆盖先写的（同一级别）：即就是在文件上代码行号更靠下的优先级更高
- 有
!important的样式，优先级最高：即无论哪一种情况，只要在样式上加了important，那么该样式的优先级最高。加了important的代码如下：p { color: white !important; }
- 选择器优先级，优先级由高到低依次为：
内联选择器(行内样式) -> ID选择器 -> 类选择起器 -> 元素选择器
示例
- 内联样式的优先级是最高的，那么当元素已经被内联样式设置的时候。我们通过
!important来覆盖：
1
2
3
4
5
| <body>
<h1 id="change" style="color: grey">
HelloWord，你看到的是已经经历过三次变换的文字。
</h1>
</body>
|
1
2
3
4
5
6
| h1 {
color: red;
}
#change {
color: black !important
}
|
- 文件上代码行号更靠下的优先级更高，即后写的覆盖先写的：
1
2
3
4
5
| <body>
<a class="hehe2 hehe1" href="#">
我是一个链接，我有两个class，我该听谁的呢？后写的优先级高
</a>
</body>
|
1
2
3
4
5
6
7
| a.hehe1 {
color: black;
}
a.hehe2 {
color: white;
background: grey;
}
|
参考
