CSS选择器优先级与实战练习解析

"五种选择器_样式的优先级" 在CSS中，选择器的优先级是决定哪些样式将被应用于HTML元素的关键因素。本资源详细介绍了五种选择器及其优先级，旨在帮助学习者理解和掌握CSS样式的应用。以下是这五种选择器的详细说明以及样式的优先级规则： 1. **基础选择器**： - `*` 通配符选择器：用于匹配任何元素，优先级最低。 - `type` 元素选择器：如`h1`, `p`, `div`等，根据元素类型选择元素。 - `#id` ID选择器：通过元素的ID属性选择元素，优先级较高。 2. **类选择器**： - `.class` 类选择器：通过元素的class属性选择元素，优先级次于ID选择器。 3. **属性选择器**： - `[attr]`, `[attr=value]`, `[attr~=value]`, `[attr|=value]`等，基于元素的特定属性值来选择元素，优先级介于类选择器和标签选择器之间。 4. **伪类和伪元素选择器**： - `:hover`, `:active`, `:focus`, `::before`, `::after`等，这些选择器基于元素的状态或结构来选择元素，优先级与类选择器相同。 5. **后代、子代、相邻兄弟、后续兄弟选择器**： - `selector1 selector2` 后代选择器，如`div p`。 - `selector1 > selector2` 子代选择器，如`div > p`。 - `selector1 + selector2` 相邻兄弟选择器，如`div + p`。 - `selector1 ~ selector2` 后续兄弟选择器，如`div ~ p`。这些组合选择器的优先级根据它们的复杂程度而增加，但总体上低于前面提到的选择器。 样式的优先级（也称为CSS权重）决定了哪个样式会被应用。计算优先级的规则如下： - 每个ID选择器有100分。 - 每个类选择器、属性选择器或伪类有10分。 - 每个元素选择器或伪元素选择器有1分。 - 内联样式（如`style="..."`）具有最高优先级，无论其数量多少，其权重为1000。 - 如果所有选择器的优先级相同，则样式表越靠近元素（内部样式 > 外部链接样式 > 浏览器默认样式），该样式优先级越高。 在提供的代码示例中，可以看到不同选择器的实例应用： - `body` 和 `p` 是元素选择器。 - `.s1` 是类选择器。 - `#d1` 和 `#d2p` 是ID选择器。 - `h1, h2, h3` 是多个元素选择器的组合。 - `div.s1` 和 `p.s1` 是类和元素的组合选择器。 练习部分则设计了不同级别的任务，帮助学习者逐步掌握这些概念，从理解到应用，提升对CSS选择器和样式的优先级的熟练度。例如，练习1关注五种选择器的使用，练习2强调样式优先级的理解，练习3和4涉及`display`和`position`这两个关键属性，而练习5涵盖了六种常见的CSS属性。 通过这样的训练，学习者能够更好地运用这些选择器和优先级规则，写出更具针对性和灵活性的CSS代码，从而在实际项目中创建出符合预期的网页布局和样式效果。