CSS-4.1-CSS选择器

本文深入讲解CSS中的选择器,包括基本选择器如标签、类、ID及通用选择器,以及扩展选择器如后代、交集和并集选择器。通过实例演示如何精确地定位和样式化网页元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • CSS选择器
    • 指定CSS要作用的标签,那个标签的名称就是选择器

CSS选择器分为两大类
1.基本选择器
2.扩展选择器

基本选择器
1.标签选择器:针对一类标签
2.类选择器:针对想要的所有标签使用
3.ID选择器:针对某一个特定的标签使用
4.通用选择器(通配符):针对所有的标签都适用(不建议使用)

扩展选择器
1.后代选择器(层级选择器):主要应用在父元素下的子元素,或者子元素下面的子元素
2.交集选择器:定义交集选择器的时候,两个选择器之间紧密相连
3.并集选择器(组选择器):如果有同样的样式设置,可以使用组选择器

一:基本选择器

基本选择器
1.标签选择器:针对一类标签
2.类选择器:针对想要的所有标签使用
3.ID选择器:针对某一个特定的标签使用
4.通用选择器(通配符):针对所有的标签都适用(不建议使用)

1、标签选择器

  • 标签选择器
    • 选择的是页面上所有这种类型的标签
    • 选择器影响范围大,建议尽量应用在层级选择器中
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签选择器</title>
	<!-- 采用的是嵌入式 -->
	<style type="text/css">
		p{
			font-weight: bold;
			font-size: 40px;
		}
		span{
			color: red;
		}
	</style>
</head>
<body>
	<p>中国</p>
	<p>我爱<span>中国</span></p>
	<span>中国</span>
</body>
</html>

效果图

在这里插入图片描述

注意事项
1.所有的标签,都可以是选择器
2.无论这个标签藏的多深,一定能够被选上
3.选择的所有,而不是一个

2、类选择器

  • 类选择器的选择符是“.”
  • 通过类命来选择元素,一个类可应用与多个元素
  • 一个元素上也可以使用多个类,应用灵活,可复用
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>类选择器</title>
	<!-- 嵌入式引入发 -->
	<style type="text/css">
		.item1{
			height: 100px;
			width: 100px;
			background-color: red;
		}
		/* 作用于同一个标签的类选择器 */
		.item2{
			border: 2px solid blue;
		}
	</style>
</head>
<body>
	<!-- 同一个标签可以使用多个类选择器 -->
	<div class="item1 item2"></div>
    <!-- 类选择器可以复用 -->
    <div class="item1"></div>
</body>
</html>

效果图
在这里插入图片描述

特点
1.类选择可以被多种标签使用
2.同一个标签可以使用多个类选择器,用空格隔开

3、id选择器

  • id选择器的选择符是“#”
  • 通过id名来选择元素
  • 元素的id名称不能重复,所以一个样式设置项只能对应页面上一个元素
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>id选择器</title>
	<style type="text/css">
		#css1{
			height: 200px;
			width: 200px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div id="css1"></div>
</body>
</html>

效果图
在这里插入图片描述

id属性值注意事项
1.只能有字母、数字、下划线
2.必须以字母开头
3.不能和标签同名

4、通用选择器

  • 通用选择器的选择符是“*”
  • 针对所有标签都适用
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通用选择器</title>
	<style type="text/css">
		*{
			color: blue;
		}
	</style>
</head>
<body>
	<div>中国</div>
	<div>北京</div>
</body>
</html>

效果
在这里插入图片描述

注意事项
1.不建议使用,IE有些版本不支持,大网站增加客户端负担
2.效率不高,页面上的标签越多,效率越低

二:扩展选择器

扩展选择器
1.后代选择器(层级选择器):主要应用在父元素下的子元素,或者子元素下面的子元素
2.交集选择器:定义交集选择器的时候,两个选择器之间紧密相连
3.并集选择器(组选择器):如果有同样的样式设置,可以使用组选择器

1、后代选择器(层级选择器)

  • E F
    • 表示所有属于E元素后代的F元素
    • 空格表示后代
  • 主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名
  • 同时也可以通过层级,防止命名冲突
<!-- version1.0 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器(层级选择器)</title>
	<style type="text/css">
        /* 含类选择器、标签选择器、id选择器都是可以的,用空格隔开 */
		div .box1 p{
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<div class="box1">
			<p>我爱中国</p>
		</div>
	</div>
</body>
</html>
<!-- version2.0 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器(层级选择器)</title>
	<style type="text/css">
        /* 标签不一定连续紧挨着,只要保持一个后代就行 */
		div p{
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<div class="box1">
			<p>我爱中国</p>
		</div>
	</div>
</body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级选择器</title>
	<style type="text/css">
		.out{
			width: 500px;
			height: 500px;
			border: 1px solid red
		}
		.out .in{
			width: 50px;
			height: 50px;
			background-color: blue;
		}
		.out div{
			width: 200px;
			height: 200px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="out">
		<div class="in"></div>
		<div>
			<div class="in"></div>
		</div>
	</div>
</body>
</html>

效果图
在这里插入图片描述

注意事项
1.标签不一定连续紧挨着,只要保持一个后代就行
2.含类选择器、标签选择器、id选择器都是可以的,用空格隔开
3.后代选择器(层级选择器),描述的是一种祖先结构.

2、交集选择器

  • 定义交集选择器的时候,两个选择器之间紧密相连
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>交集选择器</title>
	<style type="text/css">
		/* 两个选择器紧挨 */
		h3.special{
			color: red;
		}
		p#cxz{
			color: blue;
		}
	</style>
</head>
<body>
	<h3 class="special zxc">标题</h3>
	<h3 class="special">标题</h3>
	<p id="cxz">段落</p>
</body>
</html>

效果
在这里插入图片描述

注意事项
1.一般以标签名开头,必须紧挨着
2.如果后一个选择器是类选择器,则写成 div.zxc
3.如果后一个选择器是id选择器,则写成 div#cxz
4.没有空格的 div.zxc 为交集选择器,需紧挨着
5.有空格的 div .red 为后代选择器(层级选择器),无需紧挨着

3、并集选择器(组选择器)

  • 定义的时候用逗号隔开
    • 三种基本选择都可以放进来
  • 多个选择器,如果有同样的样式设置,可以使用组选择器
    • 也称为并列选择
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>并集选择器(组选择器)</title>
	<style type="text/css">
		.box1,.box2,.box3{
			width: 300px;
			height: 300px;
		}
		.box1{
			background-color: red;
		}
		.box2{
			background-color: green;
		}
		.box3{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

效果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值