CSS 选择器：元素、类、ID 选择器

CSS 选择器的作用是告诉浏览器要给“谁”添加样式。这就像是点名，只有被点名的元素才会穿上你设计的“衣服”。

一、元素选择器

元素选择器是最基础的选择器，它直接通过 HTML 标签的名称来选中所有对应的标签。它的特点是“无差别攻击”，页面中所有同名的标签都会被选中。

1. 打开你的 CSS 文件（通常是 style.css）。
2. 输入你想要修改样式的 HTML 标签名，例如 p（段落）或者 h1（一级标题）。
3. 按下 Shift + { 输入左花括号。
4. 输入具体的样式属性和值，例如 color: red;。
5. 按下 Shift + } 输入右花括号结束样式。

代码示例如下：

/* 选中页面上所有的段落，并将文字颜色设为红色 */
p {
    color: red;
}

/* 选中页面上所有的二级标题，并将字号设为 24 像素 */
h2 {
    font-size: 24px;
}

二、类选择器

类选择器允许你给元素“归类”。你可以给不同的 HTML 标签起同一个类名，然后通过这个类名一次性给它们添加相同的样式。它的特点是“灵活复用”。

1. 打开 HTML 文件，找到需要修改样式的标签。
2. 在标签内部，添加 class 属性，并赋予它一个自定义名称（例如 highlight）。
   • 代码写法：<p class="highlight">这是一段文字</p>
3. 切换到 CSS 文件。
4. 输入一个英文点号 .，后面紧跟着刚才定义的类名。
5. 输入花括号和具体的样式代码。

代码示例如下：

<!-- HTML 部分 -->
<div class="box">这是一个盒子</div>
<p class="box">这也是一个盒子</p>

/* CSS 部分：选中所有 class 为 box 的元素 */
.box {
    background-color: lightblue;
    padding: 10px;
}

三、ID 选择器

ID 选择器就像是给元素发“身份证号”。在同一个页面中，一个 ID 名称只能使用一次。它通常用于选中页面中独一无二的元素（比如网页顶部的导航栏或底部的页脚）。

1. 打开 HTML 文件，选中那个唯一的元素。
2. 在标签内部，添加 id 属性，并赋予一个唯一的名称（例如 main-header）。
   • 代码写法：<header id="main-header">网站头部</header>
3. 切换到 CSS 文件。
4. 输入一个英文井号 #，后面紧跟着刚才定义的 ID 名称。
5. 输入花括号和具体的样式代码。

代码示例如下：

/* 选中 ID 为 main-header 的唯一元素 */
#main-header {
    background-color: black;
    color: white;
    height: 80px;
}

四、选择器优先级

当同一个元素被多种选择器同时选中，且设置了冲突的样式时，浏览器需要决定听谁的。这就涉及到了优先级（特指度）。

基本原则如下：ID 选择器 > 类选择器 > 元素选择器。

也就是说，如果有一个段落标签 <p>，它同时被元素选择器设置为蓝色，被类选择器设置为绿色，被 ID 选择器设置为红色，那么它最终会显示为红色。

为了更直观地理解它们的区别和使用场景，请参考下表：