选择器的优先级

最新推荐文章于 2024-01-11 09:26:10 发布

西瓜咬人啦

最新推荐文章于 2024-01-11 09:26:10 发布

阅读量193

点赞数

分类专栏：前端基础

@TMQ

本文链接：https://blog.csdn.net/weixin_42076050/article/details/104916494

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

不同优先级下

行内样式 > ID > 类 > 标签选择器

原因：首先会加载标签选择器，再加载类选择器，然后加载id选择器，最后加载行内样式

    后加载的会覆盖前面同名的样式

相同优先级下

就近原则，在相同优先级的前提下，后加载的会覆盖前面同名样式。




p{
	text-decoration: overline;
}
```css

<!DOCTYPE html>
<html>
<head>
	<title>测试选择器的优先级</title>
	<style>
		p{
			color:blue;
			/* 下划线 */
			text-decoration:underline; 
		}
		#a{
			color:green;
		}
		.b{
			color:pink;
		}
	</style>
	<!-- 外部样式表中设置的是上划线 -->
	<link rel="stylesheet" href="css/test.css">
</head>
<body>
	<!-- 
	   p 标签的字体会选择 红色   行内样式的优先级较高
	   p标签 会选择  上划线，优先级相同的情况下，看加载的顺序，就近原则
	       后加载的覆盖前面加载的
 	-->
	<p id="a" class="b" style="color: red">呵呵呵</p>
</body>
</html>
``