当前位置：首页 > news >正文

前端基础二、CSS（二）、CSS基础选择器

news 2025/10/20 7:11:23

1、CSS选择器

选择器是什么？

CSS选择器是CSS规则的第一部分。它是选择HTML元素的方式。

CSS属性：

采取键值对形式：属性名:属性值；

CSS选择器选择标签，CSS属性修改样式。

选择器分类：

根据使用场景不同，选择器也分不同类型。

基础选择器
关系选择器
分组选择器
伪类和伪元素选择器
属性选择器

2、基础选择器

基础选择器指的是有单个选择器组成，常见的有：

类型选择器
类选择器
id选择器
通配符选择器

2.1、类型选择器

类型选择器选择某个类型的元素，也称为标签选择器

语法：

css：“类型 {样式声明;...}”

/* 选择所用div标签修改样式 */
div {color: gold;
}
/* 选择所有span标签修改样式 */
span {color: green:
}

CSS层叠性：

CSS规则可以同时作用于一个元素，浏览器通过特定规则决定最终生效的样式。层叠性解决了样式冲突问题。

原则：后定义的样式覆盖先前的样式。（就近原则）

CSS书写规范

良好的书写规范，让我们更专业。虽然代码自动格式化但是我们还需要了解。

选择器和大括号中间保留1个空格。
属性名和属性值中间也要保留1个空格。
每个CSS属性单独占一行。后期打包压缩无需担心体积问题。

案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类型选择器</title><style>/* 添加注释  ctrl + /  */div {/* 字体颜色 */color: pink;/* 字体大小 */font-size: 20px;}li {/* 列表项字体颜色 */color: blue;}/* 就近原则 层叠性 */div {/* 字体颜色 */color: red;}</style>
</head><body><!-- 类型选择器 标签选择器 元素选择器 --><div>大春</div><div>夏洛</div><div>秋雅</div><div>冬梅</div><ul><li>123</li><li>456</li><li>789</li><li>101112</li></ul>
</body></html>

运行结果：

CSS注释

CSS注释的快捷键是 ctrl + / ，注意注释内容左右两侧保持一个空格距离是良好习惯

例如：

span {/* 这里添加注释 */color: green:
}

2.2、类选择器

类选择器选择某1个元素或者多个元素。

场景：

语法：

css：“.类名{样式声明;...}”

.pink {color: pink;
}

html：“<标签 class="类名">”

<p class="pink">p标签</p>

注意：

类名自定义，不能是中文、纯数字
多个英文单词组成尽量使用“-”连接
命名要用意义，尽量见名知义
class属性可以有多个类名中间用空格隔开

案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类选择器</title><style>/* 类选择器 选择一个或多个 实现差异化选择 */.pink {color: pink;}/* 类选择器的权重（优先级）高于类型选择器（标签选择器） */div {color: red;}.sub-nav {font-size: 25px;}.product {color: blue;font-size: 30px;}</style>
</head><body><div class="pink">大春</div><div class="sub-nav">夏洛</div><div>秋雅</div><!-- 调用多个类名 --><div class="pink sub-nav">冬梅</div><!-- 产品模块 --><div class="product"><h2>产品模块</h2></div>
</body></html>

运行结果：

2.3、id选择器

选择HTML中具有特定id属性的唯一元素

语法：

css：“#id名{样式声明;...}“

#header {color: red;
}

html：”<标签 id="id名">“

<div id="header">修改样式</div>

案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id选择器</title><style>#pink {color: pink;}</style>
</head><body><div>大春</div><div id="pink">夏洛</div><div>秋雅</div><div>冬梅</div>
</body></html>

运行结果：

id和类区别

类选择器：

语法：以 . 开头，后跟类名（如 .nav）
作用：选择class属性的一个或多个元素
特点：可以使用多次
类似：身份证的名字，可以使用多次
场景：后期修改样式基本都是类选择器

id选择器

语法：以 # 开头，后跟id民（如 #header）
作用：选择特定 id 属性的唯一元素
特点：同一页面中，id值必须唯一（不能重复）
类似：身份证的编号，唯一，只能用一次
场景：后期主要是配合JavaScript添加交互效果

2.4、通配符选择器

通配符选择器可以选择HTML中所有的标签，进行样式修改。

语法：”*{样式声明;...}“

* {/* 去除所有元素的外边距 */margin: 0;/* 去除所有元素的内边距 */padding: 0;/* 统一盒模型*/box-sizing: border-box;
}

特殊情况下通过通配符清除所有元素的默认边距和填充，统一不同浏览器的默认样式。

2.5、基础选择器总结

选择器类型	语法示例	匹配范围	复用性	典型使用场景	注意事项
类型选择器	div { ... }	匹配所有指定 HTML 标签元素	某一类型标签	全局样式重置、基础标签样式（如 body, p）	避免滥用，可能导致样式冲突
类选择器	.nav { ... }	匹配所有含指定 class 的元素	多次使用	多元素共享样式	优先使用，避免与 ID 选择器冲突
ID 选择器	#header { ... }	匹配唯一含指定 id 的元素	唯一性	唯一元素标识	必须唯一，避免样式覆盖风险
通配符选择器	* { ... }	匹配所有元素	全局覆盖	全局样式重置	性能较差，慎用