基础选择器优先级

什么是优先级

CSS 优先级(也称为特异性)决定了当多个选择器匹配同一个元素时,应用哪个选择器的样式。

优先级计算

选择器优先级分为四个等级,用数字表示:

计算规则

规则1: 优先级相加

多个选择器的优先级是各自优先级的和。

/* 优先级: 1 */
div { }

/* 优先级: 10 */
.box { }

/* 优先级: 100 */
#box { }

/* 优先级: 1 + 10 = 11 */
div.box { }

/* 优先级: 100 + 10 = 110 */
#box.special { }

/* 优先级: 1 + 1 + 10 = 12 */
div p.box { }

规则2: 优先级高者胜出

优先级高的选择器会覆盖优先级低的选择器。

<style>
  /* 优先级: 1 */
  div {
    color: blue;  /* 被覆盖 */
  }

  /* 优先级: 10 */
  .box {
    color: red;   /* 生效 */
  }
</style>
<div class="box">红色文字</div>

规则3: 相同优先级,后定义者胜出

当优先级相同时,后定义的选择器生效。

<style>
  /* 优先级: 1 */
  div {
    color: blue;   /* 被覆盖 */
  }

  /* 优先级: 1 */
  div {
    color: red;    /* 生效,后定义 */
  }
</style>
<div>红色文字</div>

优先级示例

示例1: 基础选择器

<style>
  /* 优先级: 1 */
  p {
    color: blue;  /* 被覆盖 */
  }

  /* 优先级: 10 */
  .text-red {
    color: red;   /* 生效 */
  }

  /* 优先级: 100 */
  #special {
    color: green;  /* 最高,但元素没有此 ID */
  }
</style>
<p class="text-red">红色文字</p>

示例2: 组合选择器

<style>
  /* 优先级: 1 */
  p {
    color: blue;  /* 被覆盖 */
  }

  /* 优先级: 11 (1 + 10) */
  div p {
    color: red;   /* 被覆盖 */
  }

  /* 优先级: 100 */
  #main p {
    color: green; /* 生效 */
  }
</style>
<div id="main">
  <p>绿色文字</p>
</div>

示例3: 多类选择器

<style>
  /* 优先级: 10 */
  .text-red {
    color: red;  /* 被覆盖 */
  }

  /* 优先级: 20 (10 + 10) */
  .text-red.highlight {
    color: blue; /* 生效 */
  }
</style>
<p class="text-red highlight">蓝色文字</p>

示例4: 后代选择器

<style>
  /* 优先级: 2 (1 + 1) */
  div p {
    color: blue;   /* 被覆盖 */
  }

  /* 优先级: 11 (1 + 10) */
  div .box {
    color: red;    /* 生效 */
  }
</style>
<div>
  <p class="box">红色文字</p>
</div>

优先级提升

方法1: 使用 ID 选择器

/* 优先级: 10 */
.box {
  color: blue;
}

/* 优先级: 100 */
#box {
  color: red;  /* 覆盖 */
}

方法2: 增加选择器数量

/* 优先级: 10 */
.box {
  color: blue;
}

/* 优先级: 20 (10 + 10) */
.box.highlight {
  color: red;  /* 覆盖 */
}

方法3: 使用更具体的选择器

/* 优先级: 10 */
.box {
  color: blue;
}

/* 优先级: 11 (1 + 10) */
div.box {
  color: red;  /* 覆盖 */
}

方法4: 使用 !important(不推荐)

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

.box {
  color: blue;  /* 被覆盖 */
}

优先级冲突解决

冲突1: 相同优先级

/* 相同优先级: 10 */
.text-red { color: red; }
.text-blue { color: blue; }  /* 后定义,生效 */

<p class="text-red text-blue">蓝色文字</p>

冲突2: 不同优先级

/* 优先级: 10 */
.text-red { color: red; }

/* 优先级: 11 (1 + 10) */
div.text-red { color: blue; }  /* 生效 */

<div class="text-red">蓝色文字</div>

冲突3: 使用 !important

/* 优先级: 10 */
.text-red {
  color: red;
}

/* 优先级: 10 + !important */
.text-blue {
  color: blue !important;  /* 最高,生效 */
}

<p class="text-red text-blue">蓝色文字</p>

特殊情况

1: 继承的样式

继承的样式优先级为 0,任何直接设置的样式都会覆盖继承的样式。

<style>
  body {
    color: red;  /* 继承 */
  }

  p {
    color: blue;  /* 覆盖继承 */
  }
</style>
<p>蓝色文字</p>

2: 通配符选择器

通配符选择器的优先级为 0,容易被覆盖。

/* 优先级: 0 */
* {
  color: red;
}

/* 优先级: 1 */
p {
  color: blue;  /* 覆盖 */
}

3: !important

!important 会覆盖所有优先级,但应谨慎使用。

/* 优先级: 100 */
#box {
  color: blue;
}

/* 优先级: 10 + !important */
.box {
  color: red !important;  /* 覆盖 */
}

优先级速查表

实际应用

应用1: 框架样式覆盖

<style>
  /* 第三方框架样式 */
  .btn {
    padding: 10px 20px;
    background-color: #007bff;
  }

  /* 覆盖框架样式 */
  .btn-primary.btn-large {
    padding: 15px 30px;  /* 优先级: 20,覆盖 10 */
  }
</style>
<button class="btn btn-primary btn-large">大按钮</button>

应用2: 特殊元素样式

<style>
  /* 通用样式 */
  .card {
    padding: 20px;
    border: 1px solid #ddd;
  }

  /* 特殊卡片 */
  .card.highlight {
    background-color: yellow;  /* 优先级: 20 */
  }
</style>
<div class="card">普通卡片</div>
<div class="card highlight">高亮卡片</div>

应用3: 响应式样式

<style>
  /* 默认样式 */
  .box {
    width: 100%;
  }

  /* 桌面端样式 */
  @media (min-width: 768px) {
    .box {
      width: 50%;  /* 与默认优先级相同,覆盖 */
    }
  }
</style>

最佳实践

1. 避免使用 !important

/* 不推荐 */
.text {
  color: red !important;
}

/* 推荐: 提高优先级 */
.container .text {
  color: red;
}

2. 使用具体的选择器

/* 不推荐: 过于通用 */
div {
  color: red;
}

/* 推荐: 具体的类名 */
.card {
  color: red;
}

3. 控制优先级深度

/* 不推荐: 优先级过高 */
body #main .container .box .text {
  color: red;
}

/* 推荐: 合理的优先级 */
.text-red {
  color: red;
}

4. 使用命名规范

/* BEM 规范,避免优先级冲突 */
.card { }
.card__title { }
.card__title--large { }

学习要点

1. 优先级值: ID(100) > 类(10) > 标签(1) > 通配符(0)
2. 计算规则: 选择器优先级相加
3. 相同优先级: 后定义者胜出
4. !important: 最高优先级,但不推荐使用
5. 继承优先级: 为 0,容易被覆盖
6. 提升优先级: 使用 ID、增加选择器、更具体的选择器
7. 最佳实践: 避免使用 !important,使用具体选择器,控制优先级深度