带你走进 css 选择器

关注

原创最新推荐文章于 2026-06-26 17:46:59 发布 4.7k 阅读 AI 写同款· GEO 优化 ›

CSS选择器的优先级本篇博文由于夹杂了本人的理解以及方便初学者浏览的推导过程和基本概念补充，故篇幅较长。结论在最后，可直接跳至结尾查看更多文章请查看:sawyersven.github.io 在了解今天的核心内容选择器的优先级之前，我们先复习一下关于CSS选择器： CSS选择器 既然我们要搞懂的是CSS选择器的优先级，那我们首先肯定要知道CSS有哪些选择器：类型选择器/元素选择器(如：p,div,ul,li... 阅读详情

CSS选择器小结

CSS(层叠样式表-Cascadeing Style Sheets) 主要用于美化网页，布局页面;由于HTML本身只关注内容语义，而忽略网页本身的美观性，所以需要CSS来对HTML本身进行美化。
CSS规则由两个主要的部分构成：

选择器:以及一条或者多条声明
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>  /*css规范*/
			p {
				color: red;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<p> 体验css 语法规范</p>
	</body>
</html>

css 样例

代码风格：

使用展开格式书写，即一行一个属性
使用小写字母
属性值的前面，冒号的后面保留一个空格
选择器和大括号之间保留空格

CSS选择器分为基础选择器和符合选择器

作用：根据不同需求把不同标签选择出来

CSS基础选择器

标签选择器：用HTML标签名作为选择器
把某一类的标签全部选出来，能快速为页面所以同类型的标签设置统一格式，但是不能设计差异化样式

标签名 {
		属性1: 属性值1;
		属性2: 属性值2;
		......
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>
			p {
				color: red;
				font-size: 14px;
			}
			div {
				color: darkgoldenrod;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<p> 体验css 语法规范</p>
		<div> 体验css 标签选择器</div>
	</body>
</html>

类选择器: 单独选择一个或者某几个标签

.类名 {   /*类名自己定义，相关结构需要利用class属性进行调用class类*/
	属性1: 属性值1;
	......
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>
			.red{
				color: red;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<p class="red"> 体验css 语法规范</p>
		<div class="red"> 体验css 标签选择器</div>
	</body>
</html>

不可用标签的名字当做类名
不要使用纯数字，中文等命名类名
命名要有意义，尽量符合命名规范

多类名的类选择器

即 class 属性后可以加多个类名，类名中间用空格隔开。如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>
			.red{
				color: red;
				
			}
			.fonts{
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<p class="red fonts"> 体验css 语法规范</p>
		<div class="red"> 体验css 标签选择器</div>
	</body>
</html>

id选择器：以 id 属性来设置

id 选择器以 “#” 来定义

#id名{
	属性1: 属性值1;
	.....
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>
		/* id 选择器只能调用一次 可以理解为人的身份证号， 只能用一次*/
			#red {
				color: red;
				font-size: 24px;
			}
			
		</style>
	</head>
	<body>
		<p id="red"> 体验css 语法规范</p>
	</body>
</html>

通配符选择器：表示选择页面中所有标签

* {
	属性1: 属性值1;
	......
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>
			* {  /* 通配符选择器 不用调用 */
				color: red;
				font-size: 24px;
			}
			
		</style>
	</head>
	<body>
		<p > 体验css 语法规范</p>
		<div > 体验css 标签选择器</div>
	</body>
</html>

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

CSS复合选择器

由基础选择器组合形成

后代选择器：可以选择父元素里的子元素

元素1 元素2 { /* 元素1是父级，元素2是子级; 元素2可以是孙子，只要是后代即可*/
	样式声明
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>
			ol li {
				color: red;
				font-size: 24px;
			}
			ul li a{
				color: darkblue;
				font-size: 26px;
			}
		</style>
	</head>
	<body>
		<ol>
			<li> 后代选择器test</li>
		</ol>
		<ul>
			<li><a href="#">孙子</a></li>
			<li> 后代选择器test</li>
		</ul>
	</body>
</html>

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

子选择器：只能选择某元素的最近一级元素，即亲儿子元素

元素1>元素2 {
	属性1: 属性值1;
	......
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>
			ol>li {
				color: red;
				font-size: 24px;
			}
			
		</style>
	</head>
	<body>
		<ol>
			<li> 后代选择器test</li>
			<ul>
				
				<li> 后代选择器test</li>
			</ul>
		</ol>
		
	</body>
</html>

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

并集选择器：可以选择几组标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>
			p,
			div,
			span {   /* 并集选择器 */
				color: red;
				font-size: 24px;
			}
			
		</style>
	</head>
	<body>
		<p>并集选择器</p>
		<div>并集选择器</div>
		<span>并集选择器</span>
		
	</body>
</html>

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

伪类选择器：给某些选择器添加特殊效果，比如给链接添加特殊效果

用冒号表示比如 :hover, :first-child
链接伪类选择器：

a:link          /*选择所有未被访问的链接  */
a:visited       /* 选择所有已被访问的链接  */
a:hover         /*选择鼠标位于其上的链接   */
a:active     	/*选择活动链接（鼠标按下未弹起的链接*/）
/* 书写顺序 一定要按照 如上的顺序书写，否则效果显示会错误  */
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>
			/*未访问的链接*/
			a:link {
				color: red;
				text-decoration: none;  /* 无下划线 */
			}
			/* 已访问过的链接 */
			a:visited {
				color: orange;
			}
			/* 鼠标经过的时候变色 */
			a:hover {
				color: skyblue;
			}
			/* 鼠标按下没有松开 */
			a:active {
				color: green;
			}
		</style>
	</head>
	<body>
		<a href="#">伪类选择器</a>
		
	</body>
</html>

结果：
在这里插入图片描述
点击之后：（另外两中状态可以自行测试）

focus伪类选择器：用于选取获得焦点的表单元素，焦点即光标，所以一般用于 input 类表单元素

input:focus{
	color:red;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 语法规范</title>
		<style>
			input:focus {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<input type="text" />
		
	</body>
</html>