css样式优先级高低排列

/* CSS 优先级示例 */

/* 1. 行内样式（Inline Styles） */
<p style="color: red;">这段文本是红色的。</p>
/* 解释：行内样式具有最高的优先级，直接在 HTML 标签中定义。 */

/* 2. ID 选择器 */
#my-id {
    color: blue;
}
/* 解释：ID 选择器次之，每个页面中 ID 应该是唯一的。 */

/* 3. 类选择器、属性选择器和伪类选择器 */
.my-class {
    color: green;
}
/* 解释：类选择器、属性选择器和伪类选择器优先级低于 ID 选择器。 */

/* 4. 元素选择器和伪元素选择器 */
p {
    color: black;
}
/* 解释：元素选择器和伪元素选择器优先级最低。 */

/* 5. 通配符选择器 */
* {
    margin: 0;
    padding: 0;
}
/* 解释：通配符选择器优先级最低，应用于所有元素。 */

/* 6. 继承样式 */
body {
    font-family: Arial, sans-serif;
}
/* 解释：继承样式没有明确的选择器，但会从父元素继承。 */

/* 7. !important 声明 */
p {
    color: yellow !important;
}
/* 解释：!important 可以覆盖任何其他优先级规则，不推荐过度使用。 */