在实际开发中,经常有定制样式的需求,时不时会出现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; }
|
参考