CSS——important标记

最新推荐文章于 2021-08-04 00:50:03 发布

mintsolace

最新推荐文章于 2021-08-04 00:50:03 发布

阅读量693

点赞数 1

分类专栏：学习笔记 css 文章标签： css

本文链接：https://blog.csdn.net/mintsolace/article/details/77983920

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

css

32 篇文章 1 订阅

订阅专栏

important标记

	<style type="text/css">
		p{
			color:red;
		}
		#para1{
			color:blue;
		}
		.spec{
			color:green !important;
		}
	</style>
</head>
<body>
	<p id="para1" class="spec">我就想是绿色</p>
</body>

这时候是绿色，但是如果CSS中的p标签变成：

	p{
		color:red !important;
		font-size:100px;
	}

则结果便是红色。

因为通过k:v!important;来给一个属性提高权重，这个属性的权重就是无穷大。

注意语法
正确的：font-size:60px !important;
错误的：
font-size:60px; !important;
font-size:60px important;

需要注意的是：
1.important提升的是一个属性，而不是一个选择器：

	<style type="text/css">
		p{
			color:red !important;
			font-size:100px;
		}
		#para1{
			color:blue;
			font-size:50px;
		}
		.spec{
			color:green;
			font-size:20px;
		}
	</style>

只针对颜色写了important，所以就字体颜色属性提升权重；字号属性没有写，所以就没有提升权重。综合来看，字体颜色是red（听important的），字号是50px（听id的）。

2.important无法提升继承的权重，该是0还是0：
比如html结构：

<div>
	<p>哈哈哈哈哈哈</p>
</div>

其CSS样式：

	div{
		color:red !important;
	}
	p{
		color:blue;
	}

最后字体还是蓝色。
因为div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。p标签是选中了，所以字是蓝色的，要以p为准。

3.!important不影响就近原则：

	<style type="text/css">
		div{
			color:red !important;
		}
		ul{
			color:green;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>猜猜我是什么颜色</li>
		</ul>
	</div>
</body>

div选择器没有直接用于最内层标签，没有直接选择上文字所在标签，所以是通过继承性来影响文字颜色，所以权重为0。important无法提升权重是0的选择器，此时没有打破就近原则。由于ul比div近，所以以ul为准。

一般情况下不使用important，因为会让CSS很乱。

权重计算的总结：