1、CSS选择器（通配符，标签，类，id）

jasmine_qiqi

已于 2022-04-04 10:37:51 修改

阅读量331

点赞数

分类专栏： CSS 文章标签：前端 css

于 2022-04-04 08:01:30 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/123948215

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了CSS中的基本选择器类型，包括通配符选择器(*)、标签选择器(h1)、类选择器(.test)和ID选择器(#test)，并强调了选择器的使用规范，建议避免使用ID选择器，优先使用类选择器。示例中展示了不同选择器对元素样式的应用，如颜色和字体大小的设置。

摘要由CSDN通过智能技术生成

1、通配符选择器（`*`）

2、标签选择器（`<h1>`）

3、类选择器（`class`）

4、id选择器（`id`）

5、选择器规范：不用id选择器，都用类选择器

6、选择器优先级（行内样式、id选择器、类选择器、标签选择器、通配符选择器）

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css选择器</title>
	<style>
		/* 1、通配符选择器 */
		* {
			color: yellow;
		}

		/* 2、标签选择器：{属性名：属性值} */
		h1 {
			/* 字体颜色 */
			color: rebeccapurple;
			/* 字体大小：px是像素单位 */
			font-size: 12px;
		}

		/* 3、类选择器 */
		.test {
			color: red;
		}

		/* 4、id选择器 */
		#test {
			color: black;
		}


		/* 5、选择器规范：不用id选择器，都用类选择器 */
	</style>
</head>
<h1>Hello world!</h1>
<h1 class="test">Hello world!</h2>
	<p class="test">gogo!</p>
	<h2 id="test" style="color: aqua;">Hello world!</h2>

	<body>

	</body>

</html>