选择器的优先级

心奔

于 2019-04-01 12:59:26 发布

阅读量2.8k

点赞数 1

分类专栏： CSS 文章标签：选择器的优先级

本文链接：https://blog.csdn.net/g960526/article/details/88945760

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

选择器的优先级

上一节我们知道了选择器的结构开关系，这一节我们来看看选择器的优先级：
问题：当三个选择器都同时选择一个元素并且三个选择器都有不同的样式的时候，元素应该会执行哪一条的命令？

影响优先级的因素：
1.优先级类名影响
id>class>标签名>通配符>默认样式
2.选择器数量的影响
数量越多，优先级越高
3.执行顺序的影响
执行顺序越靠后优先级越高，靠后是指在靠近内容的那个标签，数量多也没有靠后的优先
4.样式位置的影响
！important> 行内样式 >大于其他选择器（就近原则）
！important 强制提升优先级到最高（就是一个外挂）

源代码如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器的优先级</title>
		<meta name="descrption" content="">
		<meta name="keywords" content="">

		<style type="text/css">
			
			/* 
			三个选择器都能选择到同一个元素
			三个选择器中，同一样式有不同的值
			那么，哪个值生效？？？？
				red
			样式生效的优先级标签
			

			影响优先级的因素
				总结：选择器描述的越清晰优先级越高，执行顺序越靠后优先级越高
			1.选择器的类名影响
				id > class > 标签名 >通配符 > 默认样式
			2.选择器数量的影响：
				数量越多，优先级越高
			3.执行顺序的影响：
				执行顺序越靠后优先级越高  靠后就是指靠近内容的那个标签,数量多也没有靠后的优先
			4.样式位置的影响：
				！important > 行内样式 > 大于其他选择器（就近原则）
				！important 强制提升优先级到最高（就是一个外挂）
			
			*/

			#word{  /* 选择器的类名影响  优先*/
				color:red;
			}
			.word{
				color:green;
			}
			span{
				color:blue;
				border:1px solid  blue;
			}
			/* *{
				border:1px solid  red;
			}*/
			

			div p{ /* 选择器数量的影响   优先*/
				color:red;
			}
			p{
				color:blue;
			}
			.one{
				color:green;
			}
			p{
				color:green !important;  
			}
			div ol p{
				color:red;
			}
			span{
				color:yellow;
			}
		</style>
	</head>

	<body>
		<span class="word" id="word">今天天气真好,好开心啊！！！ </span>
		<div>
			<p class="one" style="color:gold;">优先级好高啊</p>
		</div>

		<div>
			<ol>
				<li>
					<p>
						<span>实验靠后和数量多，哪个优先</span>
					</p>
				</li>
			</ol>
		</div>
	</body>
</html>

效果图如下：
在这里插入图片描述
选择器的优先级总结：选择器描述的越清晰优先级越高，执行顺序越靠后优先级越高。