5.选择器概述

选择器概述

导读&＃xff1a;本小节主要讲解 CSS 选择器的概念&＃xff0c;以及 CSS 选择器的分类。CSS 选择器是 CSS 中最重要的组成部分之一&＃xff0c;所以通过本小节的学习&＃xff0c;可以为后续学习 CSS 打下坚实的基础。

什么是选择器

CSS 选择器的作用是按照 CSS 规则定位 HTML 页面的一个或多个元素。浏览器在解析 HTML 页面时&＃xff0c;会根据 CSS 规则中的选择器定位 HTML 页面的元素&＃xff0c;并为对应的元素设定样式。

通过 CSS 选择器可以实现对 HTML 元素的一对一、一对多和多对一的定位。如下列表所示&＃xff1a;

• 如下示例代码所示展示了 CSS 选择器一对一定位 HTML 元素&＃xff1a;

#box {color: lightcoral;font-size: 24px;
}


• 如下示例代码所示展示了 CSS 选择器一对多定位 HTML 元素&＃xff1a;

div {color: lightcoral;font-size: 24px;
}


• 如下示例代码所示展示了 CSS 选择器多对一定位 HTML 元素&＃xff1a;

div.demo {color: lightcoral;font-size: 24px;
}


选择器的分类

• 基本选择器&＃xff1a;共有 5 个基本选择器&＃xff0c;是 CSS 选择器的最为基本的用法。
• 层级选择器&＃xff1a;共有 4 个层级选择器&＃xff0c;是根据 HTML 元素之间的关系来定位 HTML 元素。
• 组合选择器&＃xff1a;具有交集和并集两种用法&＃xff0c;是将之前基本选择器和层级选择器进行组合。
• 伪类选择器&＃xff1a;允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。
• 伪元素选择器&＃xff1a;定位所有未被包含 HTML 的实体。

总结

本小节讲解了 CSS 的概念以及种类&＃xff0c;这些内容虽然不会在开发中直接使用&＃xff0c;但是后续学习 CSS 中的基础内容。

预告&＃xff1a;下一节&＃xff0c;我们将讲解 CSS 选择器中的基本选择器的用法。