CSS3起步 03-------css声明优先级

最新推荐文章于 2022-08-02 11:44:02 发布

燃情雪

最新推荐文章于 2022-08-02 11:44:02 发布

阅读量203

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/h1234561234561/article/details/89101481

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

首先我得先说明一个误区：选择器没有优先级

问题一，那选择器没有优先级，那声明块的优先级怎末定呢？
选择器的特殊性会赋予所对应的声明块，所以如果存在多个规则对应一个元素，且存在声明冲突，则特殊性越大，越占优势。

问题二，那什么是选择器的特殊性呢？
选择器的特殊性是自身所决定的，且特殊性值表示为0，0，0，0。

问题三，那不同选择器具体的特殊性值是多少呢？
一个选择器的特殊性值如下
01，id选择器：0，1，0，0
02，类选择器，属性选择器，伪类：0，0，1，0
03，标签选择器，伪元素选择器：0，0，0，1
04，通配符：0，0，0，0
05，结合符【’.’,’~’,’+’,’>’…】没有特殊性
06，内联声明：1，0，0，0
07，继承没有特殊性

注意点：特殊性值可以累加，但是没有进位一说【举个例子：n个类选择器抵不过一个id选择器】

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css声明优先级</title>
		<style>
			*{
				background: #4A86E8;
			}
			div {
				width: 200px;
				height: 200px;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background: #000000;
			}
			.box.box.box.box.box.box.box.box.box.box.box.box{
				background: #D0E0E3;
			}
			[id]{
				background: pink;
			}
			#box {
				background: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="box" class="box" style="background: blueviolet;">
			燃情雪
		</div>
	</body>
</html>

结果：
在这里插入图片描述

继承示例【color属性为继承属性】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css声明优先级</title>
		<style>
			*{
				color: red;
			}
			div {
				width: 200px;
				height: 200px;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				color: #000000;
			}
		</style>
	</head>
	<body>
		<div id="box" class="box" style="background: blueviolet;">
			<span>燃情雪</span>
		</div>
	</body>
</html>

结果：
在这里插入图片描述
ps:由于继承没有特殊性，所以通配符比继承更占优势

问题四，不是有个重要声明什么的吗？
重要声明
01，有时某个声明比较重要，css2.1就称之为重要重要声明。
02，重要声明必须放置在声明的最后面，分号的前面width: 200px !important;之间只允许存在空格。
03，重要声明没有特殊性
04，浏览器对元素的渲染会把重要声明分一组，非重要声明分一组，且重要声明比非重要声明更加具有优势。

问题五，没了吗？
不不不，还有来源。
来源
css样式的来源大致有三种
　创作人员【我们】
　读者【用户】
　用户代理【浏览器】
权重
　读者重要声明
　创作者重要声明
　创作者非重要声明
　读者非重要声明
　用户代理声明

读者重要声明【IE里面的internet选项】
在这里插入图片描述
用户代理

问题六，怎末具体曾叠呢？
01，先按来源
02，再按选择器的特殊性
03，最终按顺序【在上述是相同的情况下，越后的越占优势；比如：类选择器和属性选择器】

菜鸟爬行中…

燃情雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3起步 03-------css声明优先级

首先我得先说明一个误区：选择器没有优先级问题一，那选择器没有优先级，那声明块的优先级怎末定呢？选择器的特殊性会赋予所对应的声明块，所以如果存在多个规则对应一个元素，且存在声明冲突，则特殊性越大，越占优势。问题二，那什么是选择器的特殊性呢？选择器的特殊性是自身所决定的，且特殊性值表示为0，0，0，0。问题三，那不同选择器具体的特殊性值是多少呢？一个选择器的特殊性值如下01，id选择器：...
复制链接

扫一扫

专栏目录