三种样式优先级

学习

三种样式优先级

2026-02-23/0/ 编辑

三种样式优先级

CSS 样式的三种书写方式

  1. 外链样式 (External Style) - <link rel="stylesheet" href="...">
  2. 内嵌样式 (Internal Style) - <style>...</style>
  3. 行内样式 (Inline Style) - style="..."

优先级规则

行内样式 > 内嵌样式 = 外链样式(就近原则)

1. 行内样式优先级最高

行内样式的优先级最高,会覆盖内嵌样式和外链样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>优先级示例</title>
  <link rel="stylesheet" href="./css/index.css" />
  <style>
    div {
      color: aqua;
      font-size: medium;
    }
  </style>
</head>
<body>
  <!-- 行内样式优先级最高,显示红色 -->
  <div style="color: rgb(255, 0, 34)">div标签</div>
</body>
</html>

2. 内嵌样式和外链样式就近原则

当同一属性在内嵌样式和外链样式中都设置了,采用就近原则,后定义的生效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>就近原则</title>
  <link rel="stylesheet" href="./css/index.css" />
  <style>
    div {
      color: aqua;  /* 后定义,生效 */
      font-size: medium;
    }
  </style>
</head>
<body>
  <!-- 显示 aqua (内嵌样式后定义) -->
  <div>我是啥颜色</div>
</body>
</html>
/* css/index.css */
div {
  color: blue;  /* 先定义,被覆盖 */
}

优先级对比表

样式类型语法优先级说明
行内样式style="..."⭐⭐⭐最高
内嵌样式<style>...</style>⭐⭐与外链样式相同
外链样式<link href="...">⭐⭐与内嵌样式相同

示例代码

示例1: 完整优先级演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>优先级示例</title>
  <link rel="stylesheet" href="./css/index.css" />
  <style>
    /* 内嵌样式 */
    div {
      color: aqua;
      font-size: medium;
    }
  </style>
</head>
<body>
  <!-- 行内样式: 显示红色 -->
  <div style="color: rgb(255, 0, 34)">div标签</div>

  <!-- 内嵌和外链就近原则: 显示 aqua -->
  <div>我是啥颜色</div>
</body>
</html>

示例2: 不同属性的优先级

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>不同属性优先级</title>
  <link rel="stylesheet" href="./css/index.css" />
  <style>
    div {
      color: red;        /* 被 style 覆盖 */
      font-size: 20px;   /* 生效 */
      background: blue;  /* 生效 */
    }
  </style>
</head>
<body>
  <div style="color: green; width: 100px;">
    文字颜色: green<br>
    字体大小: 20px (内嵌)<br>
    背景色: blue (内嵌)<br>
    宽度: 100px (行内)
  </div>
</body>
</html>

就近原则详解

情况1: 内嵌后定义

<head>
  <link rel="stylesheet" href="external.css" />
  <style>
    div { color: red; }  /* 生效 */
  </style>
</head>

情况2: 外链后定义

<head>
  <style>
    div { color: blue; }  /* 被覆盖 */
  </style>
  <link rel="stylesheet" href="external.css" />
</head>
/* external.css */
div { color: red; }  /* 生效 */

情况3: 多个内嵌样式

<head>
  <style>
    div { color: blue; }
  </style>
  <style>
    div { color: red; }  /* 生效 */
  </style>
</head>

情况4: 多个外链样式

<head>
  <link rel="stylesheet" href="first.css" />
  <link rel="stylesheet" href="second.css" />  /* 生效 */
</head>

实际应用

应用1: 覆盖库的默认样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <!-- 引入第三方库 -->
  <link rel="stylesheet" href="bootstrap.css" />
  <!-- 自定义样式,覆盖库的样式 -->
  <style>
    .btn {
      background-color: #007bff;  /* 覆盖 bootstrap 的样式 */
    }
  </style>
</head>
<body>
  <button class="btn">按钮</button>
</body>
</html>

应用2: 特殊元素的特殊样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="common.css" />
</head>
<body>
  <!-- 使用行内样式设置特殊样式 -->
  <div style="color: red; font-weight: bold;">
    特殊提示文字
  </div>
</body>
</html>

应用3: 动态样式

<script>
  // JavaScript 动态设置样式(行内样式)
  element.style.backgroundColor = 'red';
</script>

最佳实践

1. 优先使用外链样式

<link rel="stylesheet" href="style.css" />

2. 内嵌样式用于页面特定样式

<link rel="stylesheet" href="common.css" />
<style>
  /* 页面特定样式 */
  .page-header {
    background-color: #f0f0f0;
  }
</style>

3. 行内样式尽量少用

<!-- 不推荐 -->
<div style="color: red;">文字</div>

<!-- 推荐 -->
<div class="text-red">文字</div>

注意事项

1. 优先级相同的情况

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

2. !important

使用 !important 可以覆盖所有优先级。

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

注意: 不推荐大量使用 !important。

3. 选择器优先级

除了三种书写方式,选择器本身的优先级也很重要。

!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器

学习要点

  1. 优先级: 行内 > 内嵌 = 外链(就近原则)
  2. 就近原则: 后定义的样式生效
  3. 推荐: 优先使用外链样式
  4. 避免: 少用行内样式,除非必要
  5. 特殊: !important 可以覆盖所有优先级
猜你喜欢