标签选择器、类选择器、ID选择器、通配符选择器（CSS选择器）

最新推荐文章于 2024-05-12 21:28:34 发布

摸鱼的箫

最新推荐文章于 2024-05-12 21:28:34 发布

阅读量1.1k

点赞数

分类专栏：前端学习文章标签：前端

本文链接：https://blog.csdn.net/qq_50455637/article/details/126098256

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本篇对CSS四大选择器进行了详细讲解和对比。

前言

选择器分为基础选择器和复合选择器两大类。

基础选择器包括：标签选择器、类选择器、ID选择器、通配符选择器

一、标签选择器

1.含义：

指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，比如所有的div，所有的span。

2.语法：

标签名{
   属性1 ：属性值1；
   属性2 ：属性值2；
   属性3 ：属性值3；
}

3.使用案例：

使h3标题呈现出红色，宋体的效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试一下</title>
	<style>
		 
		 h3 {
		 	font-family: '宋体';
		 	color: red;
		 }
	</style>
</head>
<body>
	<h3 style="text-indent:4em">望岳</h3>
	<p>
	    岱宗夫如何？齐鲁青未了。<br />

		造化钟神秀，阴阳割昏晓。<br />

		荡胸生层云，决眦入归鸟。<br />

		会当凌绝顶，一览众山小。<br />
	</p>
</body>
</html>

效果如左。

二、类选择器（最常用）

1.含义：

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

2.语法：

.类名{
属性1：属性值1；
}

3.使用案例：

例一：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试一下</title>
	<style>
		.red {
			color: red;
		}

		.blue {
			color: blue;
		}
	</style>
</head>
<body>
	<ul>
		<li class="red">红楼梦</li>
		<li class="blue">水浒传</li>
		<li>西游记</li>
	</ul>
</body>
</html>

效果：

例二：

画三个盒子，第一个颜色是红，第二个是蓝，第三个是红，同时改变蓝色的字号

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试一下</title>
	<style>
		.box {
			width: 100px;
			height: 100px;

		}
		.red {
			background-color: red;
		}

		.blue {
			background-color: blue;
		}

		.font40 {
			font-size: 40px;
		}
	</style>
</head>
<body>
	<div class="box red ">red1</div>
	<div class="box blue font40">blue</div><!--用空格分隔，可以一次使用多个样式-->
	<div class="box red">red2</div>

</body>
</html>

这个例子说明，我们可以一次性使用多个class，用空格分隔，写在一起就行

效果：

三、id选择器

1.定义：

id选择器用 # 号定义样式，和类选择器很像

2.语法：

# id名 {
属性1：属性值1；
................
}

3.id选择器与类选择器的区别

定义时 id选择器用 # 定义，类选择器用 . 定义。
使用时 id选择器用 id=“ ” ，类选择器用 class=“ ”
使用次数不同。id选择器只可以使用一次，类选择器可以使用多次。比如id是身份证号，每个人身份证号都不一样，身份证号不重复，就像id只使用一次，而类选择器就像姓名，人可以重名。
id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用，类选择器在修改样式用的最多。