CSS学习之基本选择器优先级

一、选择器简介思维导图

二、代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优先级练习</title>
		<style type="text/css">
			#Title3{
				color: red;
			}
			#Title4{
				color: red;
			}
			.Label{
				color:green;
			}
			h1{
				color:blue;
			}
		</style>
	</head>
	<body >
		<h1 class="Label">我是标题1我用clss选择器</h1>
		<h1 class="Label">我是标题2我用clss选择器</h1>
		<h1 id="Title3">我是标题3我用id选择器</h1>
		<h1 class="Label" id="Title4" >我是标题4我用id选择器和clss选择器</h1>
		<h1>我是标题4我用标签选择器</h1>
		<h1>我是标题5我用标签选择器</h1>
	</body>
</html>

运行结果如图:

三 、总结

由运行结果可知基本选择器优先级不遵循就近原则,而是固定的,顺序为id选择器>class选择器>标签选择器。

posted @ 2020-11-18 11:18  木_心  阅读(197)  评论(0)    收藏  举报