CSS 选择器与 CSS属性权重

最新推荐文章于 2023-10-07 13:03:51 发布

Free Joe

最新推荐文章于 2023-10-07 13:03:51 发布

阅读量358

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/wangfeijiu/article/details/107218997

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS 选择器

元素选择器：通过元素的名称找到指定标签
🌰 h1{color:red}
类选择器：通过标签的class属性值选中指定元素，class可以在多个元素中使用
🌰 .box{color:red}
id选择器：通过id找到元素，一个HTML文件中id不能重复
🌰 #box{color:red}
派生选择器（后代选择器or嵌套选择器）：类似于路径，找到符合要求的元素，会匹配所有的后代元素
🌰 ul li p{color:red}
补充：匹配<ul>里面所有<li>中的全体<p>元素
子元素选择器：和后代类似，但是只能获得子元素
🌰 ul>li>p{color:red}
补充：匹配<ul>里面所有<li>中的子元素为<p>的元素

<ul>
<li><div><p>这个不是li的子元素</p></div></li>
</ul>

分组选择器：可以将多种选择器结合到一起使用，用来统一设定样式
🌰 h1,h2,#abc,.m{color:red}
属性选择器：根据元素的属性及属性值来选择元素
🌰 *[title]{color: red;} a[title][href]{color: red;}
相邻兄弟选择器：紧接在另一个元素后的元素，而且二者有相同的父元素
🌰 h3+i{color: red;}
补充：<h3>与<i>是相邻兄弟，为<i>的元素添加样式
伪元素选择器：用于向某些选择器添加特殊的效果
🌰 a:first-child:link {color: red;} div:first-letter{color: red;}
补充：并非所有元素都可使用伪元素，区分块级元素和行内元素的

CSS选择器在线代码案例展示

如果某元素的某个属性设置了多个选择器中都设置了该属性的值，最终选取哪个的值呢？当然是权重大的属性值啊！

权重计算方法（CSS特异性）

规则

权重使用四个数字来衡量(x,x,x,x)【CSS2使用三位】
继承的权重为(0,0,0,0)
标签选择器的权重为(0,0,0,1)
类、伪类选择器的权重为(0,0,1,0)
id选择器选择器的权重为(0,1,0,0)
行内样式的权重为(1,0,0,0)
!important的权重无限大

计算方法

多个选择器混杂时，权重之和也是用四个数字来组成，每一位的值为多个选择器四个数字的每位之和。举个🌰：div:first-child的权重为(0,0,0,1)+(0,0,1,0)=(0,0,1,1) ；div ul li (0,0,0,1)+(0,0,0,1)+(0,0,0,1)=(0,0,0,3)
权重之和的数制是不会进位的，低位和再大也比不上上位和，就如再多的标签选择器权重加和也抵不过一个类选择器。
多个选择器之间的顺序是无关的，不影响权重之和。

注意：对于并集选择器来说不是权重的加和，因为理论上它还是独立的，它只相当于将多个选择器的相同内容归于一个并集选择器中，理论上每一个选择器还是独立的。

权重相同时，考虑就近原则
权重不同时，权重大的生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{color: blue;}
			div span{color: red;}
		</style>
	</head>
	<body>
		<div><span>忘了吧</span></div>
	</body>
</html>