带你走进 css 选择器

最新推荐文章于 2025-03-18 15:21:57 发布

广州彭于晏

最新推荐文章于 2025-03-18 15:21:57 发布

阅读量4.7k

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/zzxb_coder/article/details/104464444

版权

前端专栏收录该内容

1 篇文章

订阅专栏

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>