CSS 算法

CSS 不执行通用算法；浏览器对每个元素执行选择器匹配、级联、继承、值计算和布局。理解这些步骤比背诵单个优先级数字更可靠。

样式与布局阶段

阶段	关键输入	结果
选择器匹配	DOM、伪类状态、选择器	候选声明
级联	来源、重要性、层、优先级、顺序	胜出声明
继承与值计算	父元素、变量、单位	计算值
Grid 轨道计算	可用空间、固定与弹性轨道	最终轨道尺寸

CSS 的独特之处

:where() 的优先级恒为零，适合提供易覆盖的默认规则。级联层顺序位于选择器优先级之前，因此后置层中的低优先级规则也可以覆盖前层规则。

综合示例

@layer base, theme, overrides;

@layer base {
  .card { color: #334155; background: #f1f5f9; }
}

@layer theme {
  :where(.card) { color: #3730a3; }
  .grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}

@layer overrides {
  .card[data-priority="high"] { color: #991b1b; border-color: currentColor; }
}

.card {
  padding: 1rem;
  border: 2px solid #94a3b8;
  border-radius: 0.5rem;
}

CSS

@layer base, theme, overrides;

@layer base {
  .card { color: #334155; background: #f1f5f9; }
}

@layer theme {
  :where(.card) { color: #3730a3; }
  .grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}

@layer overrides {
  .card[data-priority="high"] { color: #991b1b; border-color: currentColor; }
}

.card {
  padding: 1rem;
  border: 2px solid #94a3b8;
  border-radius: 0.5rem;
}

@layer base, theme, overrides; @layer base { .card { color: #334155; background: #f1f5f9; } } @layer theme { :where(.card) { color: #3730a3; } .grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; } } @layer overrides { .card[data-priority="high"] { color: #991b1b; border-color: currentColor; } } .card { padding: 1rem; border: 2px solid #94a3b8; border-radius: 0.5rem; }

Tab 缩进 · Shift+Tab 反向缩进 · Esc 后按 Tab 离开编辑器
修改后切换到“效果”刷新预览 · Ctrl/⌘ + Enter