📖 介绍 📖

如果你是一个前端新手，可能经常会遇到这样的困惑：明明自己设置了某个属性，却无法达到预期效果。按钮的颜色总是不对，布局总是显得混乱，这可能是因为你的样式被覆盖了。样式被覆盖，往往是因为在CSS中有更为优先的规则被应用。今天，我们就来学习一下CSS样式的优先级机制，特别是!important的用法，以及一些需要注意的问题。

🏡 演示环境 🏡

本文演示环境如下：

• 操作系统：Windows 11
• 浏览器：Chrome
• IDE版本：PyCharm 2023.2.5 (Professional Edition)

注意：本文内容为个人笔记，仅供参考。

📒 CSS样式优先级 📒

CSS样式优先级决定了当多个样式规则应用于同一个元素时，哪一个规则会生效。优先级由选择器的类型和结构决定。以下是CSS选择器的优先级规则，从高到低排列：

1. 内联样式（例如：<div style="color: red;">）
2. ID选择器&#x