css 优先级

最新推荐文章于 2023-09-20 11:08:31 发布

Novice-XiaoSong

最新推荐文章于 2023-09-20 11:08:31 发布

阅读量158

点赞数

分类专栏： CSS 文章标签： css 优先级

本文链接：https://blog.csdn.net/SJ1551/article/details/109403424

版权

CSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、总结层叠优先级内联样式 > 样式表 > 外部样式表 > @import > 浏览器缺省样式表优先级ID选择器 > (伪)类选择器, 属性选择器 > (伪)元素选择器 > 通配符选择器!important 标识的优先级最高。多个 !Important 按前2点计算相对优先级二、注意同优先级的选择器，后定义的覆盖先定义的虽然伪元素的优先级较低，但伪元素选择器会创建新的元素，所以伪元素选择器设置的css会覆盖该伪元素继承而来的c

摘要由CSDN通过智能技术生成

一、总结

层叠优先级

内联样式 > 样式表 > 外部样式表 > @import > 浏览器缺省
样式表优先级

ID选择器 > (伪)类选择器, 属性选择器 > (伪)元素选择器 > 通配符选择器
兄弟、子孙选择器的无权重。也就是与其他选择器一起使用时对整体的优先级无影响。
```
.parent .child{
	color: red;
}
.child.exact{
	color: blue;
}
```
这两个选择器的优先级是一样的（也就是第一个选择器中的子孙选择器对优先级计算无贡献），不过后写的会覆盖先写的
!important 标识的优先级最高。多个 !Important 按前3点计算相对优先级（业务中避免使用这个!important，很dirty）

二、注意

同优先级的选择器，后定义的覆盖先定义的

虽然伪元素的优先级较低，但伪元素选择器会创建新的元素，所以伪元素选择器设置的css会覆盖该伪元素继承而来的css

<!DOCTYPE html>
<html>
	<head>
		<style>
			body div:first-child {color: green;}
			div::first-letter {color: pink;}
		</style>
	</head>
	<body>
		<div class='div1'>
			Coding
		</div>
	</body>
</html>

在这里插入图片描述

Novice-XiaoSong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 优先级

一、总结层叠优先级内联样式 > 样式表 > 外部样式表 > @import > 浏览器缺省样式表优先级ID选择器 > (伪)类选择器, 属性选择器 > (伪)元素选择器 > 通配符选择器!important 标识的优先级最高。多个 !Important 按前2点计算相对优先级二、注意同优先级的选择器，后定义的覆盖先定义的虽然伪元素的优先级较低，但伪元素选择器会创建新的元素，所以伪元素选择器设置的css会覆盖该伪元素继承而来的c
复制链接

扫一扫