CSS基础选择器

最新推荐文章于 2025-02-21 14:39:32 发布

溯琳

最新推荐文章于 2025-02-21 14:39:32 发布

阅读量369

点赞数 4

分类专栏： web #css选择器文章标签： css

本文链接：https://blog.youkuaiyun.com/m0_56787796/article/details/115498437

版权

web 同时被 2 个专栏收录

23 篇文章

订阅专栏

#css选择器

3 篇文章

订阅专栏

"本文详细介绍了CSS中的基础选择器，包括标签选择器、类选择器、ID选择器和通配符选择器。标签选择器允许快速为同类型标签设置统一样式，类选择器通过点号"."调用类名实现差异化设计，ID选择器以 "#" 标识，用于唯一选择一个元素，常配合JS使用。通配符选择器 "*" 可选中所有标签，但在实际使用中需谨慎，避免过度使用。"

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

h1 {color: aqua; font-size: 20px;}
选择器{属性：属性值;属性:属性值;}

标签选择器

p {color: red;}

标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
标签选择器可以将某一类标签全部选择出来设置属性。
优点：快速的将同类型的标签同一样式。
缺点：不能有差异化的设计。

类选择器

类选择器使用class属性来调用class类。
在HTML中

<div class="a">红色</div>

在CSS中

.a {
	color: red;
   }

类选择器用“.”标识，后面加类名（例子中的类名“a”）。
不要使用中文、纯数字命名，尽量全使用英文。
命名要有意义。
记忆口诀：样式点定义，结构类调用，一个或多个，开发最常用。（ps：黑马pink老师）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a {
				font-size: 20px;
			}
			.b {
				font-size: 50px;
			}
			.bb {
				color: red;
			}
			.cc {
				color: blue;
			}
		</style>
	</head>
	<body>
		<!-- class可以有多个类名，但名与名之间需要用空格隔开 -->
		<div class="a aa">溯琳真帅</div>
		<div class="b bb">溯琳超帅</div>	
		<div class="b cc">溯琳最帅</div>
	</body>
</html>