illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 CSS 现代标准 · 核于 2026-06

速查 ​

  • 选择器三基石：类型 p、类 .x、ID #y；复合（无空格）＝与，列表（逗号）＝或
  • 组合器：后代（空格）、子 >、相邻兄弟 +、后续兄弟 ~
  • 特异性三列 ID-CLASS-TYPE，逐列从左比：ID 1-0-0 ≫ 类/属性/伪类 0-1-0 ≫ 类型/伪元素 0-0-1；* 与组合器与 :where() 记 0
  • :is() / :not() / :has() 取参数最高特异性；:where() 恒 0
  • 层叠四步：来源与重要性 → 层叠层 → 特异性 → 书写顺序（前一步分不出才看下一步）
  • !important 反转来源与层序；动画压普通声明、过渡优先级最高
  • @layer：普通声明「后声明层 > 先声明层，未分层 > 已分层」；!important 全反转
  • 全局关键字：inherit / initial / unset / revert / revert-layer（注意 initial ≠ 浏览器默认）
  • 现代 Baseline：:is() / :where()（2021）、@layer（2022）、:has()（2023）

选择器速查表 ​

选择器写法命中特异性
通用*所有元素0-0-0
类型p该标签所有元素0-0-1
类.card含该类的元素0-1-0
ID#hero该 id 元素1-0-0
属性存在[disabled]含该属性0-1-0
属性全等[type="text"]值完全等于0-1-0
属性词含[class~="big"]空格词表含某词0-1-0
属性前缀[href^="https"]值以…开头0-1-0
属性后缀[href$=".pdf"]值以…结尾0-1-0
属性子串[class*="btn-"]值含子串0-1-0
列表（或）h1, h2, .t任一命中各算各的
复合（与）a.btn[href]同时满足各列累加
后代nav a任意层级后代组合器记 0
子ul > li直接子元素组合器记 0
相邻兄弟h2 + p紧邻下一个兄弟组合器记 0
后续兄弟h2 ~ p之后所有同级组合器记 0

伪类 / 伪元素速查 ​

名称类型作用
:hover / :active / :focus / :focus-visible状态伪类交互态（优先 :focus-visible 画焦点环）
:checked / :disabled / :required / :valid状态伪类表单态
:target状态伪类URL #锚点 指向的元素
:root结构伪类文档根（放 CSS 变量）
:first-child / :last-child / :only-child / :empty结构伪类位置 / 空判定
:nth-child() / :nth-of-type()结构伪类An+B 公式选序号；nth-child 数全部兄弟，nth-of-type 数同类
:is(列表)函数式伪类分组 + 容错；取参数最高特异性
:where(列表)函数式伪类同 :is，但特异性恒 0
:not(列表)函数式伪类取反；算参数最高特异性
:has(相对选择器)函数式伪类父 / 前兄弟选择器；取参数最高特异性
::before / ::after伪元素插入虚拟内容（需 content）
::first-letter / ::first-line伪元素首字母 / 首行
::selection / ::placeholder / ::marker / ::backdrop伪元素选区 / 占位符 / 列表符 / 遮罩

特异性规则 ​

  • 三列计分 ID-CLASS-TYPE，每条选择器算出一组三元值，逐列从左往右比，左列更大者直接赢——不进位（1 个 ID 压过任意多个类）。
  • 计 ID 列：#id。计 CLASS 列：类、属性、伪类。计 TYPE 列：类型、伪元素。
  • 记 0：通用 *、组合器（> + ~ 空格）、:where()、嵌套 &。
  • :is() / :not() / :has()：自身记 0，但加入参数列表里最高特异性那一项。
  • 行内 style="" 概念上更高（1-0-0-0），只有 !important 能压。
  • !important 不算特异性，属「来源 / 重要性」维度，比特异性更先裁决；两条 !important 之间才回到比特异性。
  • 全平（同来源、同层、同特异性）时，后写的赢。
css
[type="password"] {
} /* 0-1-0 */
input:focus {
} /* 0-1-1 */
:root #app input:required {
} /* 1-2-1 */
:where(#x) h1 {
} /* 0-0-1（:where 归零，只剩 h1） */
p:not(#id) {
} /* 1-0-1（带上参数里的 #id） */

级联顺序（完整优先级，低 → 高） ​

档位说明
1浏览器（UA）普通声明
2用户普通声明
3作者普通声明：分层样式（先声明层 → 后声明层）
4作者普通声明：未分层样式（高于任何分层普通声明）
5行内 style（普通）
6动画 @keyframes
7作者 !important：未分层
8作者 !important：分层（后声明层 → 先声明层，反转）
9用户 !important
10浏览器（UA）!important
11行内 style（!important）
12过渡 transition（最高，连 !important 都压）

记忆要点：普通声明「越后越强、未分层最强」；!important 一切反转（来源反转、层序反转、分层强于未分层）；动画压普通、过渡封顶。

继承与全局关键字 ​

  • 可继承属性（未赋值时取父级计算值）：color、font-*、line-height、letter-spacing、visibility、list-style 等（多为文字排版）。
  • 非继承属性（未赋值时取规范初始值）：margin、padding、border、width、height、background 等（多为盒模型 / 布局）。
  • 直接命中永远压过继承——继承值是最弱的值。
关键字取值注意
inherit父元素该属性的计算值让非继承属性也继承父级
initial该属性在 CSS 规范里的初始值不是浏览器默认！display: initial → inline 而非 block
unset可继承 → 同 inherit；非继承 → 同 initial一键回「自然状态」
revert回退到更低来源（用户 / UA）的值撤销作者样式、保留浏览器默认外观
revert-layer回退到上一个 @layer 的值撤销本层、露出下层

级联层（@layer）速记 ​

css
@layer reset, base, theme, utilities; /* 定序：先声明者优先级最低 */

@import url("lib.css") layer(reset); /* 第三方导入到低层 */

@layer base {
  body {
    font: 16px/1.5 system-ui;
  }
}

.btn {
  color: var(--brand);
} /* 未分层 → 普通声明里优先级最高，轻松覆盖分层 */
  • 层间只比层序、不比特异性；层内照常比特异性。
  • 普通声明：后声明层 > 先声明层 > 不分层？错——未分层最高；分层中后声明者更高。
  • !important：层序反转，且分层 > 未分层。
  • 嵌套：@layer a.b { … }；匿名层 @layer { … }（不可再追加）。
  • @import ... layer() 须在样式表最前。

现代特性 Baseline 状态（2026-06 核） ​

特性状态说明
:is() / :where()✅ Baseline 广泛可用（2021-01）放心用；旧名 :matches() / :any() 已弃用
:not()（选择器列表参数）✅ Baseline（2021–2022）基础 :not() 支持更早
@layer 级联层✅ Baseline 广泛可用（2022-03）驯服第三方 CSS、组织设计系统的首选
revert-layer✅ 随 @layer 一同可用撤销本层
:has() 关系选择器✅ Baseline 新近可用（2023-12）父 / 前兄弟选择器；老环境可用 :is() 包裹降级
:nth-child(... of S)🟡 渐进可用Selectors L4，较新；按需降级

权威链接 ​

标准 / 规范

课程 / 指南

兼容性 / 调试

相关页 ​