CSS样式的优先级以及覆盖

在实际开发中,经常有定制样式的需求,时不时会出现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选择器 -> 类选择起器 -> 元素选择器

示例

  1. 内联样式的优先级是最高的,那么当元素已经被内联样式设置的时候。我们通过!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. 文件上代码行号更靠下的优先级更高,即后写的覆盖先写的:
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;
}

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道