css 优先级算法及权重

最新推荐文章于 2025-06-22 09:17:52 发布

Jackson-p

最新推荐文章于 2025-06-22 09:17:52 发布

阅读量468

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jikexueyuan5555/article/details/79279224

前端专栏收录该内容

22 篇文章

订阅专栏

一、基本概念

权重：根据元素选择器的不同和先后顺序的不同来决定哪一条规则被浏览器选中并作用于元素

优先级：不同css样式作用于同一元素，变根据优先级来判断哪种css样式生效

一般我们的优先级是：行内样式>ID选择器>类，属性选择器和伪类选择器>元素和伪元素

说明：

1、行内样式，指的是html文档中定义的style

行内样式包含在你的html中对你的元素产生直接作用，比如:

<h1 style="color: #fff;">header</h1>
2、ID选择器

Id也是元素的一种标识，比如#div

3、类，属性选择器和伪类选择器

这一类包括各种class，属性选择器，伪类选择器比如 :hover,:focus等等。

4、元素和伪元素选择器(::after,::before,::first-letter,::first-line,::selecton
元素跟伪元素选择器，比如:before 与 :after.
---------------------------------------------------------------------------------------------------------------------------------

二、优先级算法

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

ID选择器的特殊性值，加0,1,0,0。
类选择器、属性选择器或伪类，加0,0,1,0。
元素和伪元素，加0,0,0,1。
通配选择器*对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important，它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

特殊情况：如果对同一元素的两个css规则权重相同，则后面的规则优先级高
for example~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
		a{color: yellow;} /*特殊性值：0,0,0,1*/
		div a{color: green;} /*特殊性值：0,0,0,2*/
		.demo a{color: black;} /*特殊性值：0,0,1,1*/
		.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
		.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
		#demo a{color: orange;} /*特殊性值：0,1,0,1*/
		div#demo a{color: red;} /*特殊性值：0,1,0,2*/
</style>
</head>
<body>
<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高-->
    <a href="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高-->
</div>
<div id="demo">
    <a href="">第四条应该是红色</a><!--适用第6、7行规则，第7行优先级高-->
</div>
</body>
</html>

效果：