样式优先级规则

样式优先级规则如下：

1. 优先级层级（从高到低）：

!important > 内联样式 > ID选择器 > 类/伪类/属性选择器 > 标签/伪元素选择器 > 通配符 > 继承

2. 权重计算：

• !important：∞
• 内联样式：1000
• ID选择器：100
• 类/伪类/属性：10
• 标签/伪元素：1
• 通配符：0

3. 示例权重计算：

/* 权重：0 */
* { }

/* 权重：1 */
div { }

/* 权重：10 */
.class1 { }

/* 权重：11 */
div.class1 { }

/* 权重：100 */
#id1 { }

/* 权重：110 */
#id1.class1 { }

/* 权重：111 */
#id1.class1 div { }

/* 最高优先级 */
.class1 { color: red !important; }

4. 同权重情况：

• 后写的样式覆盖先写的

.box { color: red; }
.box { color: blue; } /* 生效 */

5. 特殊规则：

• 继承的样式没有权重
• 通配符选择器权重为0
• 子选择器和后代选择器不影响权重

/* 权重：10 */
.parent .child { }

/* 权重：10 */
.parent > .child { }

6. 实际应用建议：

/* 避免过长选择器 */
/* 不推荐 */
.header .nav .list .item { }

/* 推荐 */
.nav-item { }

/* 避免使用!important */
/* 不推荐 */
.box { color: red !important; }

/* 推荐 */
.theme-red { color: red; }

/* 使用类选择器替代ID选择器 */
/* 不推荐 */
#header { }

/* 推荐 */
.header { }

7. 常见问题：

/* 问题1：样式无法覆盖 */
/* 第三方样式 */
.button { color: red !important; }

/* 解决方案：增加选择器特异性 */
.theme .wrapper .button { color: blue; }

/* 问题2：选择器过于具体 */
/* 不利于维护 */
.header .nav .list .item .link { }

/* 解决方案：使用BEM命名 */
.nav-item__link { }

8. 优先级最佳实践：

• 避免使用!important
• 避免使用内联样式
• 使用类选择器而不是ID
• 保持选择器简短
• 使用BEM等命名规范
• 按照模块组织样式
• 避免过度嵌套

9. SCSS/LESS中的嵌套：

// 注意控制嵌套深度
.parent {
  // 一级嵌套
  &__child {
    // 二级嵌套
    &--modifier {
      // 不建议继续嵌套
    }
  }
}

10. 调试优先级：

• 使用浏览器开发工具
• 查看样式覆盖情况
• 分析选择器权重
• 理清样式来源

以上就是CSS样式优先级的主要规则。合理使用这些规则可以写出更好维护的CSS代码。