CSS的优先级计算规则

CSS的优先级决定了当多个规则作用于同一个元素时，哪些样式会被应用。理解这些规则对编写可维护的样式表至关重要。

优先级的基本概念

CSS优先级通过权重系统来计算，权重高的规则会覆盖权重低的规则。优先级计算基于选择器的类型和数量，而不是代码的顺序（除非权重相同，此时后定义的规则生效）。

选择器权重计算规则

CSS优先级权重由四个部分组成，按重要性从高到低排列：

1. !important声明
2. 内联样式（style属性）
3. ID选择器
4. 类选择器、属性选择器和伪类
5. 元素选择器和伪元素

权重计算方式不是简单的加法，而是采用类似数字位的方式：(a,b,c,d)

• a: 是否使用!important
• b: ID选择器的数量
• c: 类、属性、伪类选择器的数量
• d: 元素、伪元素选择器的数量

权重计算示例

/* 权重: 0,0,0,1 */
p {
  color: blue;
}

/* 权重: 0,0,1,0 */
.text {
  color: red;
}

/* 权重: 0,0,1,1 */
p.text {
  color: green;
}

/* 权重: 0,1,0,0 */
#main {
  color: purple;
}

/* 权重: 0,1,1,1 */
#main p.highlight {
  color: orange;
}

/* 权重: 1,0,0,0 */
.special {
  color: black !important;
}

特殊情况的处理

!important规则

!important会覆盖所有其他规则（除了更高优先级的!important），但应谨慎使用：

.button {
  background: blue !important;
}

/* 这个不会覆盖上面的规则 */
#special-button {
  background: red;
}

内联样式

直接在HTML元素上使用style属性具有很高的优先级：

<p style="color: pink;">这段文字是粉色的</p>

通配符和继承

通配符选择器(*)和继承的样式优先级最低：

/* 权重: 0,0,0,0 */
* {
  margin: 0;
}

/* 继承的样式可以被任何显式规则覆盖 */
body {
  font-family: Arial;
}

复杂选择器的权重计算

当选择器组合使用时，需要分别计算各部分然后相加：

/* 权重: 0,0,2,1 (0,0,2,1) */
ul.menu li.active {
  background: yellow;
}

/* 权重: 0,1,1,1 (0,1,1,1) */
#sidebar ul.menu li {
  background: gray;
}

伪类和伪元素的权重

伪类和伪元素在权重计算中属于不同类别：

/* 权重: 0,0,1,1 */
a:hover {
  color: red;
}

/* 权重: 0,0,0,2 */
p::first-line {
  font-weight: bold;
}

属性选择器的权重

属性选择器与类选择器具有相同的权重：

/* 权重: 0,0,1,0 */
[type="text"] {
  border: 1px solid #ccc;
}

/* 权重: 0,0,1,1 */
input[type="text"] {
  padding: 5px;
}

选择器组合的影响

不同的选择器组合方式会影响最终权重：

/* 权重: 0,0,0,2 */
div p {
  margin: 10px;
}

/* 权重: 0,0,0,1 + 0,0,0,1 = 分开计算 */
div, p {
  padding: 5px;
}

实际应用中的优先级问题

在实际项目中，经常会遇到优先级冲突的情况：

<style>
  .card { background: white; }  /* 权重: 0,0,1,0 */
  #featured .card { background: yellow; }  /* 权重: 0,1,1,0 */
  body.home #featured .card { background: orange; }  /* 权重: 0,1,2,0 */
</style>

<div id="featured">
  <div class="card">卡片内容</div>
</div>

避免优先级过高的问题

过度依赖高优先级选择器会导致样式难以维护：

/* 不好的实践 - 权重过高 */
body.home #main #content .article ul li a {
  color: blue;
}

/* 更好的方式 - 保持低权重 */
.article-link {
  color: blue;
}

调试优先级问题

当样式不按预期生效时，可以：

1. 使用浏览器开发者工具检查应用的样式
2. 查看哪些规则被覆盖（通常有删除线）
3. 注意计算后的优先级权重

<style>
  .title { color: red; }
  h1 { color: blue; }
</style>

<h1 class="title">标题颜色</h1>

CSS预处理器的影响

Sass/Less等预处理器生成的嵌套选择器可能产生高优先级：

// 编译后可能产生高优先级选择器
.menu {
  ul {
    li {
      a {
        color: red;
      }
    }
  }
}

性能考虑

虽然现代浏览器优化得很好，但过于复杂的选择器仍可能影响性能：

/* 性能较差 */
div:nth-child(2n+1) > span[data-value^="prefix"] ~ a:hover::before

/* 性能更好 */
.highlight-link:hover::before

模块化CSS中的优先级管理

现代CSS方法论（如BEM）通过命名约定避免优先级问题：

/* BEM 命名约定 */
.block__element--modifier {
  color: red;
}

重置和归一化样式

重置样式表通常使用低优先级选择器，方便覆盖：

/* 低优先级重置 */
html, body, div, span, h1, h2, h3, p {
  margin: 0;
  padding: 0;
}

层叠上下文的影响

在某些情况下，层叠上下文会影响样式的显示，即使优先级相同：

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 9999; /* 仍然受限于父级的层叠上下文 */
}

媒体查询中的优先级

媒体查询不会改变选择器的优先级，只是条件应用：

/* 权重相同，后定义的生效 */
@media (min-width: 768px) {
  .container { width: 750px; }
}

@media (min-width: 992px) {
  .container { width: 970px; }
}

自定义属性的优先级

CSS变量（自定义属性）的优先级遵循常规规则：

:root {
  --main-color: blue;
}

.component {
  --main-color: red; /* 会覆盖根变量的值 */
  color: var(--main-color);
}

阴影DOM中的优先级

在阴影DOM中，外部样式通常不会影响组件内部，除非特别声明：

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        /* 组件内样式 */
        p { color: red; }
      </style>
      <p>阴影DOM内容</p>
    `;
  }
}

动画和过渡的优先级

动画样式会覆盖常规样式，即使优先级较低：

.box {
  background: red; /* 权重: 0,0,1,0 */
  animation: changeColor 2s infinite;
}

@keyframes changeColor {
  50% {
    background: blue; /* 动画期间会覆盖原始样式 */
  }
}

伪元素的内容属性

content属性的优先级有其特殊性：

.tooltip::after {
  content: "默认提示"; /* 可以被更高优先级的规则覆盖 */
}

.tooltip.special::after {
  content: "特殊提示"; /* 会覆盖上面的content */
}

用户代理样式的优先级

浏览器默认样式具有最低优先级，通常会被作者样式覆盖：

/* 覆盖浏览器默认的a标签样式 */
a {
  color: #0066cc;
  text-decoration: none;
}

选择器性能与优先级的平衡

在编写CSS时，需要在选择器性能和优先级之间找到平衡：

/* 平衡性能和优先级 */
.product-list > .item > .title {
  font-size: 1.2em;
}

/* 比下面的性能更好，同时保持合理优先级 */
.product-list .item .title {
  font-size: 1.2em;
}

动态类名的优先级

JavaScript动态添加的类名遵循相同的优先级规则：

<style>
  .active { color: red; }
  .highlight { color: yellow; }
</style>

<p id="text">示例文本</p>

<script>
  document.getElementById('text').classList.add('active', 'highlight');
  // 最终颜色为yellow，因为两个类权重相同，后者生效
</script>

多类选择器的优先级

多个类选择器的组合会增加权重：

/* 权重: 0,0,1,0 */
.btn {
  padding: 8px 16px;
}

/* 权重: 0,0,2,0 */
.btn.primary {
  background: blue;
}

相邻兄弟选择器的权重

相邻兄弟选择器(+)和通用兄弟选择器(~)不影响权重计算：

/* 权重: 0,0,1,1 */
h2 + p {
  margin-top: 0;
}

/* 权重: 0,0,1,1 */
h2 ~ p {
  color: gray;
}

否定伪类的权重

:not()伪类本身不增加权重，但括号内的选择器会计入权重：

/* 权重: 0,0,1,1 (来自input和:not) */
input:not(.disabled) {
  opacity: 1;
}

全局样式与组件样式的冲突

在组件化开发中，全局样式可能意外影响组件：

/* 全局样式 - 可能意外影响组件 */
button {
  border-radius: 4px;
}

/* 组件样式 - 需要足够优先级 */
.my-component button {
  border-radius: 0;
}

选择器特异性可视化工具

一些工具可以帮助可视化选择器的特异性：

# 使用特定工具分析CSS选择器
css-specificity-analyser styles.css

未来CSS的变化

CSS新特性如:is()和:where()会改变优先级计算方式：

/* :where()中的选择器不计入权重 */
:where(.container) .item {
  color: blue; /* 权重: 0,0,0,1 */
}

/* :is()中的选择器取最高权重 */
:is(#main, .container) .item {
  color: red; /* 权重: 0,1,0,1 (来自#main) */
}