一、实验内容
本次实验围绕 CSS 选择器的优先级规则及基础选择器的使用展开，核心操作与验证内容如下：
- 基础选择器定义与样式编写
- 编写 HTML 结构，定义 3 个
<p>标签，分别赋予不同 id（p1、p2、p3）和 class（food、animal）属性，具体为：<p id="p1" class="food">可乐鸡翅</p> <p id="p2" class="food">麻婆豆腐</p> <p id="p3" class="animal">猫咪</p> - 在 CSS 的
<style>标签中，分别使用标签选择器（注释形式验证）、ID 选择器（#p1、#p3）、类选择器（.food）为元素设置样式，包括文字颜色，其中#p3设置了rgb(57, 146, 49)色值的文字颜色，.food类先后定义了rgb(9,120,185)和rgb(141, 67, 211)两种颜色。<style> #p1 { color: rgb(9, 120, 185); } .food { color: rgb(141, 67, 211); } #p3 { color: rgb(57, 146, 49); } </style>具体情况如图所示：
- 编写 HTML 结构，定义 3 个
- 优先级规则验证
- 验证 CSS 渲染优先级：行内样式 > ID 选择器 > 类选择器 > 标签选择器，本次实验以 ID 选择器和类选择器为核心，验证同优先级样式的 “后来居上” 规则（
.food类后定义的样式覆盖先定义的样式）。<style> .food { color: rgb(9, 120, 185); } .food { color: rgb(141, 67, 211); } </style>具体情况如图所示：
- 结合 HTML 中元素的 id、class 属性，观察不同选择器对应样式的最终渲染效果，确认 ID 选择器对单个元素的唯一性控制，以及类选择器对多元素的批量样式控制。
<style> #p1 { color: rgb(9, 120, 185); } .food { color: rgb(141, 67, 211); } #p4 { color: rgb(57, 146, 49); } </style> </head> <body> <p id="p1" class="food">可乐鸡翅</p> <p id="p2" class="food">麻婆豆腐</p> <p id="p3" class="food">剁椒鱼头</p> <p id="p4" class="animal">猫咪</p> </body>具体情况如图所示：
- 验证 CSS 渲染优先级：行内样式 > ID 选择器 > 类选择器 > 标签选择器，本次实验以 ID 选择器和类选择器为核心，验证同优先级样式的 “后来居上” 规则（
二、实验心得
本次实验让我直观掌握了 CSS 选择器优先级的核心规则，也深刻理解了 id 与 class 属性在选择器应用中的差异化作用，同时意识到合理配置选择器能让 CSS 样式编写更高效、更易维护。
