1、选取器概述
1、什么是选取器
CSS 选取器的功效是根据 CSS 规则定位 HTML 页面的一个或多个元素。浏览器在解析 HTML 页面时，会按照 CSS 规则中的选取器定位 HTML 页面的元素，并为对应的元素设定样式。
（说白了：便是对元素做标记，方便按照标记去决定给那几个元素添加css样式）
经过 CSS 选取器能够实现对 HTML 元素的一对一、一对多和多对一的定位
如下示例代码所示展示了 CSS 选取器一对必定位 HTML 元素：
#box {
color: lightcoral;
font-size: 24px;
}
如下示例代码所示展示了 CSS 选取器一对多定位 HTML 元素：
div {
color: lightcoral;
font-size: 24px;
}
如下示例代码所示展示了 CSS 选取器多对必定位 HTML 元素：
div.demo {
color: lightcoral;
font-size: 24px;
}
2、选取器的归类
CSS 从第1版本发展到第三版本，引起 CSS 选取器的种类越来越繁杂。日前，CSS 选取器的归类详细如下：
基本选取器：共有 5 个基本选取器，是 CSS 选取器的最为基本的用法。
层级选取器：共有 4 个层级选取器，是按照 HTML 元素之间的关系来定位 HTML 元素。
组合选取器：拥有交集和并集两种用法，是将之前基本选取器和层级选取器进行组合。
伪类选取器：准许未包括在 HTML 页面中的状态信息选定位 HTML 元素。
伪元素选取器：定位所有未被包括 HTML 的实体。
提示：CSS 选取器的归类以及命名方式，区别资料中可能会有区别，但选取器的每一种用法是一致的。
2、基本选择器
1、概述
CSS 的基本选取器是选取器所有种类中最为基本的用法，基本选取器共有 5 种详细用法，如下：
类型（Type）选取器（有些中文资料中叫作为“元素选取器”）
类（Class）选取器
ID 选取器
通用选取器（有些中文资料中叫作为“通配符选取器”）
属性选取器
2.1、类型选取器
类型选取器，又叫作为元素选取器，这种基本选取器是经过 HTML 页面的元素名定位详细 HTML 元素。倘若类型选取器单独运用的话，会定位当前 HTML 页面中所有该元素名的元素。（经过元素名定位元素）
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类型选取器</title>
<style>
div {
color: lightcoral;
font-size: 24px;
}
</style>
</head>
<body>
<div>这是测试内容.</div>
<p>这是另一个测试内容.</p>
</body>
</html>
2.2、类选取器
类选取器是经过 HTML 元素的 class 属性的值定位详细 HTML 元素。这种基本选取器的用法是 .className 形式，其中 className 叫作为类名
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选取器</title>
<style>
.demo {
color: lightcoral;
font-size: 24px;
}
</style>
</head>
<body>
<div class="demo">这是测试内容.</div>
<p>这是另一个测试内容.</p>
</body>
</html>
2.3、ID 选取器
ID 选取器是经过 HTML 元素的 id 属性的值定位详细 HTML 元素。这种基本选取器的用法是 #ID 形式，其中 ID 是 id 属性的值
例：
#ID {
属性 : 属性值;
}
如下示例代码展示了ID 选取器的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选取器</title>
<style>
#Demo {
color: lightcoral;
font-size: 24px;
}
</s
| 
发表于 2024-6-29 13:52:21