CSS Id 和 Class选择器学习笔记
1. 概述
CSS（Cascading Style Sheets）是一种用于描述网页样式的语言。在 CSS 中，我们可以通过选择器（Selectors）来选中需要进行样式操作的 HTML 元素。
其中，Id 和 Class 选择器是两种常见的选择器类型。它们可以根据元素的 id 或 class 属性对其进行选择，并为其设置样式。
2. Id 选择器
Id 选择器通过元素的 id 属性选中特定的元素，并为其设置样式。id 属性值应该唯一，这意味着同一页中不能出现多个相同 id 值的元素。
Id 选择器的语法是通过在选择器名称前加上“#”符号来表示，例如：
Copy Code#my-element {
color: red;
}
上述代码将为 id 值为 “my-element” 的元素设置字体颜色为红色。
3. Class 选择器
Class 选择器是根据元素的 class 属性的值来选中一个或多个元素，并为其设置样式。class 属性可以被多个元素使用，因此可以为页面的多个元素设置同样的样式。
Class 选择器的语法是通过在选择器名称前加上“.”符号来表示，例如：
Copy Code.my-class {
background-color: blue;
}
上述代码将为所有 class 属性值为 “my-class” 的元素设置背景颜色为蓝色。
4. 实例
下面是一个使用 Id 和 Class 选择器的实例：
Copy Code<!DOCTYPE html>
<html>
<head>
<title>Id 和 Class 选择器学习笔记</title>
<style type="text/css">
#my-id {
color: green;
}
.my-class {
font-size: 18px;
line-height: 1.6;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h1 id="my-id">这是一个标题</h1>
<p class="my-class">这是一个段落。</p>
<p class="my-class">这是另一个段落。</p>
</body>
</html>
上述代码中，我们首先通过 Id 选择器选中了一个标题元素，并将其字体颜色设置为绿色。接下来，我们使用 Class 选择器选中两个段落元素，并为它们设置了统一的样式，包括字体大小、行高、内边距、背景颜色、边框等。
通过使用 Id 和 Class 选择器，我们可以轻松为网页中的元素设置样式，使网页具有更加统一和美观的外观。