css中选择器的权重问题

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

超级马里澳

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

阅读量205

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_48802281/article/details/125414987

版权

一样式冲突

当不同选择器同时选中同一个元素，进行相同的样式设定时就会产生样式冲突。发生样式冲突时则需要根据选择器的权重来判断应用哪一种样式。

二选择器的权重

内联样式>id选择器>class选择器/属性选择器/伪类选择器>元素选择器>通配选择器>继承样式

!important权重最高，但是要慎用。

注意事项

1.比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示

2.(并集选择器)分组选择器是单独计算的

3.如果优先级计算后相同，此时则优先使用靠下的样式

4.选择器的累加，不会超过上一级数量级，例如：class选择器再高也不会超过id选择器、量变达不到质变

以下是示例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		    <style>
				.d1{
					color: #008000;
				}
				[title=d]{
					color: #00FFFF;
				}
				div{
					color: #ADFF2F;
				}
				*{
					color: #FFA500;
				}
		        #d1{
					color:greenyellow !important;
				}
				   
		    </style>
	</head>
	<body>
		<div id="d1" style="color:red;" class="d1" title="d">
		      div元素
		      <span>span元素</span>
		      <em>em元素</em>
		    </div>
	</body>
</html>