1. 行内样式（最高优先级）

• 定义：写在 HTML 标签里的 style 属性，例如：

  <h1 style="color: red;">博客标题</h1>
  
  

• 效果：不管外部样式表怎么写，这个行内样式都会优先生效。

• 在你的博客里：首页和文章页没有直接写行内样式（因为你用的是 bootstrap + 自定义 css），所以这一层优先级基本没用到。

2. ID 选择器（次高优先级）

• 定义：通过 #idName 选择元素，例如：

  #header { background: blue; }
  
  

  <div id="header">标题区</div>
  
  

• 效果：一个 ID 在页面里只用一次，权重比类选择器和标签选择器高。

• 在你的博客里：导航栏可能有 id="navMain"，bootstrap 的脚本用这个 ID 控制折叠。如果你在 css 写了 #navMain { background-color: black; }，它会覆盖 .navbar { background-color: white; }。

3. 类选择器（中等优先级）

• 定义：通过 .className 选择，例如：

  .nav-link { color: green; }
  
  

  <a class="nav-link">首页</a>
  
  

• 效果：比标签选择器优先，但会被 ID 选择器压过。

• 在你的博客里：

  • Bootstrap 定义了 .nav-link { padding: ... }；
  • 你在 content.css 里写 .nav-link { color: red; } → 颜色会被覆盖成红色，但 padding 仍用 bootstrap 的。

4. 标签选择器（最低优先级）

• 定义：直接用元素名选择，例如：

  h1 { font-size: 24px; }
  p { line-height: 1.6; }
  
  

• 效果：全局生效，但优先级最低。