linkedin-skill-assessments-quizzes 之 CSS 技能评估全考点精解：选择器、层叠、盒模型、Flexbox 与 Grid 布局实战指南

本篇技术指南以本仓库中的 CSS 技能评估题库（乌克兰语版） 及其英文原版 css-quiz.md 为骨架，系统梳理 CSS 面试与技能评估中的全部核心考点：选择器与特异性、层叠与 !important、盒模型与间距、定位与层叠上下文、Flexbox 与 Grid 布局、单位与字体、颜色与透明度、伪类与伪元素等。读完本文，你将掌握一套可复用的 CSS 知识自查体系，并能独立验证每个考点对应的源码与标准行为，为参加技能评估或日常前端开发建立扎实基础。

文档背景：仓库中的 CSS 测验资源

本仓库维护了多语言版本的技能评估题库，其中 css/css-quiz.md 为英文原版（README 中记录为 171 题），css/css-quiz-ua.md 为乌克兰语译本，二者题目一一对应，另提供 中文版 与 法语版 供对照学习。乌克兰语版题目与英文版结构完全一致，每题附带 4 个选项并标注正确答案（[x]），许多题目还给出了"变体题"（同一知识点换一种问法），这正是面试中常见的考察方式——同一个概念换件马甲反复出现。

本文按知识点主线组织内容，把散落在题目中的考点归类讲解，并在每一节给出可直接验证的代码示例，帮助你在阅读 css/css-quiz-ua.md 全量题库时快速定位薄弱环节。

一、选择器体系：从类型选择器到组合器

1.1 基本选择器与命名

CSS 中最基础的三类选择器，从题库中反复出现（对应 Q5、Q98、Q171）：

/* 类型（元素）选择器：选中所有 <header> 元素 */
header { ... }

/* 类选择器：选中所有 class="nav" 的元素，以点号开头 */
.nav { ... }

/* ID 选择器：选中 id="nav" 的元素，以井号开头，页面中唯一 */
#nav { ... }

考点提示：.nav、nav、#nav 三者分别对应"类为 nav 的元素""nav 元素""id 为 nav 的元素"，三者互不等价（Q5）。类与 ID 的区别在于：ID 只能应用于页面中的一个元素，而类可以多次复用；从特异性角度看，ID 选择器的特异性远高于类选择器（Q171）。

通用选择器 * 用于匹配所有元素（Q73），其特异性权重为 0，因此 * {} 通常会被任何具体选择器覆盖（见 Q67 中优先级对比）。

1.2 属性选择器

属性选择器按属性及其取值筛选元素，是题库的高频考点（Q2、Q3、Q47、Q89、Q107）：

/* 选中带有 title 属性的 <a> 元素 */
a[title] { ... }

/* 选中 href 以 "#" 开头的 <a>（页面内锚点链接） */
a[href^="#"] { ... }

/* 选中 href 中包含 "domain.com" 的 <a>（子串匹配） */
a[href*='domain.com'] { color: pink; }

/* 选中 href 以 "domain.com" 结尾的 <a> */
a[href$='domain.com'] { color: pink; }

其中 ^= 匹配属性值开头、$= 匹配结尾、*= 匹配任意位置包含。特别注意：a[href='*domain.com'] 这类写法是无效的——* 通配符只能配合 *= 使用，不能直接写在引号内（Q107）。另一常见陷阱是 a[href="#"] 只精确匹配 href="# 的字面值，无法覆盖 #section 之类带锚点名的情况，因此"选中页面内所有锚点链接"应使用 a[href^="#"]（Q47）。

属性选择器还可与否定伪类组合。例如要选中所有未禁用（enabled 状态）的文本输入框：

input[type="text"]:not([disabled]) { ... }

该规则先由 input[type="text"] 限定类型，再由 :not([disabled]) 排除带 disabled 属性的元素（Q89）。

1.3 组合器：后代、子元素与兄弟元素

组合器决定了选择器之间的结构关系，题库用多道题目考察（Q19、Q38、Q39、Q94、Q100、Q119、Q126、Q162）：

/* 后代组合器（空格）：选择 article 内部所有 p，包括嵌套在 aside 中的 */
article p { color: blue; }

/* 子组合器（>）：只选择 article 的直接子元素 p，不穿透嵌套 */
article > p { color: green; }

/* 相邻兄弟组合器（+）：选择紧跟在 h2 后面的那个 p */
h2 + p { background: beige; }

/* 一般兄弟组合器（~）：选择 h2 之后的所有 p 兄弟 */
h2 ~ p { color: blue; }

以题库中的经典 HTML 为例：

<section>
  <p>Абзац 1</p>
  <h2>Заголовок</h2>
  <p>Абзац 2</p>
  <p>Абзац 3</p>
</section>

h2 ~ p 会把"Абзац 2、3"都染成蓝色，而 h2 + p 只给紧邻 h2 的"Абзац 2"加上背景（Q38、Q39、Q126）。同理，section > p 只选直接子级（Q100），而 div p 会选中 div 内所有层级的 p（Q162）。

组合器 + 后代关系的混合使用也很常见。例如 article p 与 article > p 同时存在时，直接子元素 p 命中更具体的选择器 article > p，嵌套在 aside 里的 p 则只命中 article p（Q94）——这正是特异性在组合器场景下的应用。

二、特异性、层叠与 !important：决定"谁说了算"

2.1 特异性计算

当多个规则命中同一元素时，浏览器按特异性权重决定胜负。题库对此有大量考察（Q1、Q15、Q67、Q87、Q102）：

• 元素选择器（a、p）：权重最低；
• 类选择器、属性选择器、伪类：中等权重；
• ID 选择器：权重最高；
• 内联样式（style="..."）优先级高于普通选择器。

Q1 的经典题：对锚点链接而言，ul li a（3 个元素）、a（1 个元素）、.example a（1 个类 + 1 个元素）、div a（2 个元素）中，特异性最高的是 .example a——因为一个类选择器的权重就压过任意数量的元素选择器。

Q87 的排序题给出同一 <section><p class="example"> 结构下的特异性升序：p（最低）< section p < [class*='example']（属性选择器等价于类）< p.example（元素 + 类，最高）。

Q67 的优先级对比：div.sidebar（类+元素）、*（0）、div#sidebar2 p（ID+2 元素）、.sidebar p（类+元素）中，唯一带 ID 的 div#sidebar2 p 获胜。

实战可套用口诀：行内样式 > ID > 类/属性/伪类 > 元素/伪元素 > 通用选择器。

2.2 层叠（Cascade）与来源

CSS 的"层叠"（Cascading）指多个来源的规则如何合并决策。Q149 问哪个来源优先级最高，答案是 author important declarations（作者样式中带 !important 的声明）——它排在 author normal（普通作者声明）、user normal（用户普通声明）之前。

Q36 是一道反向陷阱题：问"哪种声明占优"，正确的理解是：!important 声明会翻转正常来源顺序，因此 user（用户样式表）中的 !important 会胜过 author（作者样式表）中的普通声明。而作者样式表中的 !important 优先级最高。

!important 的作用是"替换默认的源码顺序和特异性规则"（Q69、Q154），语法为 color: red !important;，但应谨慎使用——它会让后续维护变得困难。只有当某条规则确定不会被其他规则覆盖时才推荐使用（Q154）。

层叠的最终产物是"级联值"（cascaded value）——即赢得层叠的那个声明值（Q151）。级联机制确实为每条规则赋予权重（Q150）。

2.3 特异性实战演练

Q15 给出了一个绝佳的综合性示例：

.example { color: yellow; }   /* 类，高权重 */
ul li a   { color: blue; }    /* 3 个元素 */
ul a      { color: green; }   /* 2 个元素 */
a         { color: red; }     /* 1 个元素 */

<ul>
  <li><a href="#" class="example">link</a></li>
  ...
</ul>

链接同时被四条规则命中，但 .example 是唯一的类选择器，特异性最高，因此链接显示 黄色。

再如 Q54 的进阶题——p:first-of-type（伪类 + 元素）与 p、.container、p:first-child 竞争：p:first-of-type 和 p:first-child 都是"类级 + 元素级"权重，二者特异性相同，此时后定义的规则获胜（源码顺序），所以最终结果是 p:first-child { color: green } 生效？题目正确答案为 red（p:first-of-type）。细看：HTML 中第一个子元素是 <h1>，因此 p:first-child 并不匹配（p 不是第一个子元素），而 p:first-of-type 匹配——<div> 内第一个 p 类型的元素是"Абзац1"。所以在实战中，除了特异性，还要注意选择器是否真正匹配目标元素。

2.4 变体题提示

Q36 与 Q149 互为变体，Q16/Q17、Q8/Q9、Q11/Q12、Q38/Q39、Q128/Q137 等均为同一知识点的不同问法。阅读 css/css-quiz-ua.md 时，遇到"Примітка: альтернатива"（意为"以下为变体题"）标记，说明该知识点是评估中的重点，值得反复练习。

三、盒模型：margin、padding、border 与尺寸计算

3.1 盒模型的组成

盒模型由 margin、padding、border、width、height 五个特征构成（Q106）。其中：

• margin（外边距）：在元素外部添加空间；
• padding（内边距）：在元素内部、内容与边框之间添加空间；
• border（边框）：围绕在 padding 外的边界线（Q48）。

透明度方面有个冷知识：盒模型中 margin 和 padding 都是透明的（Q144）——padding 区域只显示背景色，margin 区域完全透明。

3.2 简写属性与有效取值

padding/margin 的简写规则是高频考点（Q49、Q131）：

padding: 10px 0px;            /* 上下 10px，左右 0 */
padding: 10px 0;              /* 同上，0 可以不带单位 */
padding: 10px 0px 10px 0px;   /* 上 右 下 左 */
padding: 10px 10px 0px 0px;   /* 上 10、右 10、下 0、左 0 —— 与题意不符 */

Q49/Q131 问"哪种写法不是'上下 10px、左右 0'的有效表达"：答案是 padding: 10px 10px 0px 0px;——它表示的是上 10、右 10、下 0、左 0，四个方向并不对称。四值简写的顺序是上、右、下、左（顺时针），务必牢记。

3.3 margin 折叠

margin 折叠（margin collapsing）只发生在普通文档流中块级元素的垂直（上下）方向（Q161）。相邻两个块元素的上边距与下边距会合并取较大值：

<div style="margin-bottom: 2rem;">Div 1</div>
<div style="margin-top: 2rem;">Div 2</div>

两个 2rem 的垂直边距折叠后取 2rem 而非 4rem（Q34）。这是布局中经典的"预期 4rem 实际 2rem"陷阱。

3.4 box-sizing 与尺寸计算

box-sizing 控制 width/height 的计算方式（Q163）：

• content-box（默认）：width/height 只含内容，padding 和 border 会额外增加元素总尺寸；
• border-box：width/height 包含 padding 和 border，总尺寸不变，是当前主流实践推荐的取值。

顺带一提：Q140 考察了内联元素的高度——display: inline 的元素上设置 height: 200px 不生效，其高度由行高（line-height，此处 20px）决定。

3.5 margin: 0 auto 与水平居中

Q103 与 Q121 考察块级元素水平居中：

.example {
  width: 800px;
  margin: 0 auto;
}

当容器宽度大于 800px 时，margin: 0 auto 表示上下边距为 0，左右边距自动均分剩余空间，从而水平居中（Q103）。注意 auto 只能实现水平居中，垂直方向需要借助 Flexbox/Grid 或定位（Q121 的正确写法为内层 width: 50%; margin: 0 auto;）。

四、定位体系：position、z-index 与层叠上下文

4.1 position 的四种模式

position 用于把元素从正常文档流中"拎出来"进行定位（Q13、Q24、Q51、Q112、Q132）：

• position: static（默认）：元素按正常文档流排列，top/right/bottom/left 无效；
• position: relative：相对其正常位置偏移，仍占据原空间；
• position: absolute：脱离文档流，相对最近的已定位祖先（position 非 static）定位；若没有，则相对初始包含块（Q51 的"在容器内固定位置"场景）；
• position: fixed：始终相对**视口（viewport）**定位，不随滚动移动（Q24）。

Q13 的实战场景：要让全局导航栏固定在页面顶部不随滚动，应使用 position（配合 fixed）而不是 flexbox、grid 或 float。

4.2 绝对定位的偏移属性

绝对定位使用 left/top/right/bottom 指定偏移，而不是 margin/padding（Q53、Q132）：

.logo {
  position: absolute;
  left: 100px;
  top: 150px;   /* 正确 */
}

margin-left/top 与 padding-left/top 虽然在部分场景看起来"有效"，但它们不改变定位原点，属于错误做法（Q53、Q132 均以此类干扰项设陷阱）。

Q122 综合考察偏移计算：.pen 是 100×100 的 position: relative 容器，#puppy { position: absolute; right: 80px; bottom: 0; }——right 距右 80px、bottom 为 0，元素落在左下角。

4.3 覆盖容器：absolute + 四角归零

Q112 展示用绝对定位实现"遮罩铺满容器"：

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

关键前提是 .container 已设置 position: relative，且 overlay 的四个偏移全部归零。position: static 的写法无法生效（Q112 的 C 选项即为陷阱）。

4.4 z-index 与层叠

当元素重叠时，z-index 决定谁在上面（Q16、Q17、Q113、Q147）：

• 值越大越靠上；允许正数、零和负数；
• 只能作用于已定位元素（position 非 static）或 flex/grid 容器内元素；
• z-index: -1 可以把元素放到其定位祖先的内容之后。

Q113 的示例：图片 position: absolute 且要放在文本下方，缺失的代码是 z-index: -1——负值让图片退到正常流文本之后；若用正值反而会把图片盖住文本。

五、布局模型：Float、Flexbox 与 Grid

5.1 Float 与清除浮动

float 虽日渐被 Flexbox/Grid 取代，但旧代码库中依然常见（Q4）。浮动的副作用是元素脱离文档流，导致容器高度塌陷——浮动元素被移出正常流，容器只按剩余非浮动内容（如文本）计算尺寸（Q111）。

两种主流的清除浮动（clearing floats）技术（Q4）：

/* 方案一：clearfix hack —— 在父元素上使用 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 方案二：给父元素设置非 visible 的 overflow */
.container {
  overflow: auto; /* 或 hidden */
}

注意两个前提：clearfix 要加在父元素上（而非浮动元素本身）；overflow 的值必须不是 visible（如 auto/hidden）才能触发 BFC 包裹浮动子元素。

5.2 Flexbox 核心属性

Flexbox 通过主轴（main axis）与交叉轴组织子项，题库聚焦以下几个属性（Q35、Q37、Q40、Q92）：

flex-direction 决定主轴方向（Q37）：

• row：从左到右（默认）；
• row-reverse：从右到左、顺序反转；
• column：从上到下；
• column-reverse：从下到上、顺序反转。

要纵向排列 flex 子项，可写 flex-direction: column（flex-flow: column 是包含 direction+wrap 的简写，同样有效）（Q35）。

重要易错点（Q92）：flex-direction 必须声明在 flex 容器（display: flex 的元素）上，而不是子项上：

.container {
  display: flex;
  flex-direction: row-reverse; /* 正确位置 */
}
.item {
  border: 1px solid red; /* 子项上声明 flex-direction 无效 */
}

justify-content 沿主轴分配剩余空间（Q40）。题目给出"两端对齐、中间等距"的示意图，正确值为 space-between；space-around 会在每一项两侧各留一半间隙，效果不同。

5.3 Grid 布局：fr 单位与轨道

Grid 引入了弹性单位 fr（fraction，分数），用于按比例分配可用空间（Q8、Q9、Q84）：

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 50px 1fr 2fr;
}

计算方式：固定列 50px 先行扣除，剩余 450px 按 1:2 分配——第二列 150px、第三列 300px（Q8、Q9 正确答案）。2fr 1fr 则让第一列宽度是第二列的 2 倍（Q84）。

网格项跨列/跨行（Q135）：让 header 横跨整行（第一列到最后一列）：

header {
  grid-column: 1 / -1; /* 1 到最后一列 */
}

-1 表示最后一根网格线，1/-1 即从第一列延伸到最后一列。

网格项定位（Q141）：要把元素放到第 3 行第 3 列，应使用：

.x {
  grid-row: 3;
  grid-column: 3;
}

上图即题库 Q141 的配图：3×3 的网格中，X 需要被放置在第三行第三列——这正是 grid-row: 3; grid-column: 3; 的效果。row: 3; column: 3; 这类写法是无效的（不存在裸 row/column 属性）。

内容居中（Q136）：在网格单元格内同时水平、垂直居中，需要同时设置两条轴的对齐：

.container {
  align-items: center;   /* 交叉轴（块轴）居中 */
  justify-items: center; /* 主轴（行轴）居中 */
}

stretch 是默认拉伸效果，start/end 只能对齐单边，都无法实现"双轴居中"。

六、单位体系：px、em、rem 与视口单位

6.1 em 与 rem 的基准

• rem（root em）：相对页面根元素（<html>）的 font-size（Q29）；
• em：相对当前元素（或其父元素）的 font-size，可叠加继承。

Q80 是经典计算题：

html { font-size: 10px; }
body { font-size: 2rem; }   /* = 20px */
.rem { font-size: 1.5rem; } /* = 1.5 × 10px = 15px */
.em  { font-size: 2em; }    /* = 2 × body 的 20px = 40px */

.rem 元素为 15px；.em 元素继承 body 的 20px 后再乘 2，得到 40px——注意 em 的基准是自身继承的 font-size，而非根元素，这是两者最大的区别。

6.2 视口单位 vw/vh/vmin/vmax

视口单位相对浏览器视口尺寸计算（Q104）。以视口 800×600 为例：

• 10vw = 视口宽度的 10% = 80px；
• 10vh = 视口高度的 10% = 60px；
• 10vmin = 取宽高中较小者的 10% = 60px；
• 10vmax = 取宽高中较大者的 10% = 80px。

6.3 其他单位与相对长度

• %：相对父元素相应属性（如 Q52 的 margin-left: calc(5% + 5px) 中，5% 指父元素宽度的 5%，calc() 允许混合单位参与计算）；
• smaller：把字号设为比父级小一档的相对关键字（Q114），与 larger 对应；
• rem 计算不受嵌套层级影响，是响应式设计中推荐的单位。

七、字体与排版：font-family、line-height、font-weight

7.1 字体堆栈（font stack）的顺序

字体声明是一个由候选字体组成的堆栈（Q76、Q77）：

font-family: "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;

规则是：第一个为首选字体，其后按优先级排列备选；最后一个必须是通用字体族（如 sans-serif、serif、monospace），作为兜底（Q76、Q77）。Q77 明确指出：若某候选字体在用户机器上不可用，则依次尝试下一个，通用字体族兜底。

7.2 font-weight 数值与关键字

font-weight 可用关键字或 100–900 的数值（Q45、Q75）：

• font-weight: 400 ↔ normal；
• font-weight: 700 ↔ bold。

Q75 的等价转换：font-weight: bold 等价于 font-weight: 700。注意 bolder/lighter 是相对父级的调整关键字，与绝对数值不可混为一谈（Q45 干扰项）。

7.3 line-height 的两种取值

line-height 控制两行文字基线之间的间距（Q10、Q164），其取值方式有两种（Q18）：

line-height: 20px; /* 固定 20px */
line-height: 2;    /* 无单位的倍数：2 倍当前 font-size */

无单位倍数（如 2）会继承"因子"并在各层级按各自字号重新计算，避免绝对像素导致的继承错乱，是推荐写法。line-height 只影响行与行的间距，不影响字符宽度或元素间距（Q10、Q164）。

7.4 @font-face 与自定义字体

自定义字体通过 @font-face 规则加载（Q58、Q145），典型写法：

@font-face {
  font-family: 'Avenir';
  src:
    url('avenir.woff2') format('woff2'),
    url('avenir.woff') format('woff');
}

Q50 指出该示例的问题在于把 sans-serif 写进了 font-family 声明里——@font-face 中 font-family 应指定一个自定义字体名，通用字体族字样放在此处会造成歧义。@font-face 的 src 需要 url() + format() 成对出现并用逗号分隔。

Web 字体的取舍（Q78）：优点是字体样式丰富，缺点是并非总是免费服务，且增加站点带宽消耗。

Google Fonts 的接入方式是"通过 HTML 链接元素引入 Google 提供的 CSS"（Q79）：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

7.5 排版相关杂项

• letter-spacing：字符间距（Q81）；
• font-size 的有效值包括 50%、1em、20px（百分比、em、px 均合法；xsmall 不是标准关键字，Q110）；
• font-style 的有效值为 normal、italic、oblique，none 无效（Q57）；
• text-align 有效值为 left、center、right、justify（Q168）；
• text-decoration-line 指定下划线、上划线等线型装饰（Q146）；
• 图标字体（icon fonts，如 Glyphicons）可以用 font-size 和 color 等排版属性直接样式化，这是相比图片图标的主要优势（Q41、Q44）。

八、颜色与透明度：rgba、opacity 与色彩体系

8.1 合法与非法颜色值

Q33 问哪个不是合法颜色值：#000、rgb(0,0,0)、#000000 都合法，而 000000（不带 # 前缀）非法。Q156：rgb(255,0,0) 显然是红色。

8.2 opacity 与 rgba() 的本质区别

这是 Q6 的高频考点：

• opacity: 0.5 作用于整个元素，包括其所有子内容（文本、子元素背景），并创建层叠上下文；
• background: rgba(0, 0, 0, 0.5) 只影响背景色本身的透明度，内容不受影响。

rgba() 的四个参数为 Red、Green、Blue、Alpha（0–1），Alpha 为 0 时完全透明、1 时不透明（Q90）。Q66 的实战场景——链接默认实心蓝底、hover 时半透明，正解是：

a:link  { background: #0000ff; }
a:hover { background: rgba(0, 0, 255, 0.5); }

8.3 透明度的视觉比较

Q71 问白色背景上哪种背景"看起来最亮"：rgba(170,170,170,0.2)（Alpha 0.2，透明度最高、透出白色最多）比 #aaa、#999999、rgba(...,0.5) 都更浅。记住：Alpha 越小越透明，白底上越亮。

8.4 颜色体系补充

hsl(0, 0, 0, 0.5) 这类四参数 hsl 写法无效（hsl 用 hsl(h, s%, l%)，透明度应写 hsla()）（Q90 干扰项）；渐变方面使用 background: linear-gradient(#648880, #293f50);——属性是 background 而非 background-color，函数是 linear-gradient 而非 linear/gradient（Q108）。

九、伪类与伪元素：状态与内容的样式钩子

9.1 链接状态伪类（LVFHA 顺序）

链接有五个状态，样式规则必须按固定顺序书写才能全部生效（Q99、Q127）：

a:link    { ... }  /* 未访问 */
a:visited { ... }  /* 已访问 */
a:focus   { ... }  /* 键盘 Tab 聚焦 */
a:hover   { ... }  /* 鼠标悬停 */
a:active  { ... }  /* 点击按下、尚未松开 */

顺序口诀 LVFHA（Link → Visited → Focus → Hover → Active）。Q127 的语义要点：

• :visited：链接被打开过之后应用；
• :active：鼠标按下后、松开前的瞬间状态；
• :hover：鼠标悬停期间；
• :focus：通过键盘 Tab 等获得焦点时。

Q22 的陷阱：:active 是"按下未松开"的状态，而不是"点击之后"或"悬停"；Q70 的 a:visited 用于设置点击后的链接颜色。

9.2 结构性伪类

:nth-child 的 an+b 公式（Q46）：要"从第 2 个元素开始，每 3 个取 1 个"（即第 2、5、8…），公式为 li:nth-child(3n + 2)。其中 n 从 0 递增，3n+2 依次产出 2、5、8…。干扰项 2n+3 产出 3、5、7（不对）；3 + 2n 是非法语法。

:first-of-type 与 :first-child 的区别（Q54、Q105）：

• p:first-of-type：父元素下第一个 p 类型的元素（即使前面有 h1 也匹配）；
• p:first-child：必须是父元素的第一个子元素且该子元素是 p。

Q105 的组合题：p:first-of-type:first-letter 会把每个父容器（body、article、section）中第一个 p 的首字母染红——对应题目中的段落 1、3、5。

9.3 表单状态伪类与否定伪类

• :invalid：匹配未通过校验的表单控件（Q128、Q137）：

input:invalid { color: red; }

• :not(选择器)：匹配"不满足括号内条件"的元素（Q89，见上文属性选择器一节）。

9.4 伪元素：::before、::first-letter、::placeholder

单冒号与双冒号（Q56）：CSS3 引入 :: 双冒号将伪元素与伪类区分开。现代浏览器两种写法都支持 ::before/:before；但 IE8 及以下不支持双冒号。因此新代码一律写双冒号。

• ::first-letter：给段落首字母加样式——正确写法 p::first-letter { color: red; }（Q27），单冒号 p:first-letter 是旧写法；first-letter::p 之类的颠倒写法无效；
• ::placeholder：样式化表单控件中的占位提示文本（Q55）；
• 伪类用于样式化元素的特定状态（如 hover、focus），伪元素用于插入或样式化元素的特定部分/生成内容（Q96）。

十、背景与视觉效果：background、border-radius、阴影、transform

10.1 background 简写与拆解

background 简写一行可包含多个子属性（Q14）：

background: blue url(image.jpg) no-repeat scroll 0px 0px;

拆解为：

background-color: blue;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 0px;

子属性顺序为 color → image → repeat → attachment → position。注意子属性名是 background-image、background-attachment、background-position，不存在 background-img、background-src、background-scroll 等变体（Q14 干扰项）。

背景重复（Q25、Q116）：默认背景图无限重复，水平和垂直两个方向（Q25）；要禁止平铺用 background-repeat: no-repeat;（Q116）。fixed、none 都不是 repeat 的合法取值。

背景定位（Q83）：background-position: 10% 50% 表示图片距容器左 10%、距顶部 50% 处对齐。

背景图加载（Q118）：语法为 background-image: url('wood.png');（URL() 不区分大小写，但 file()、裸文件名均非法）。

10.2 圆角与阴影

border-radius（Q30）：圆角属性的正确名称是 border-radius，不存在 corner-radius、border-corner、corner-curve。只圆左上、右上两个角（Q86）有两种等价写法：

/* 四值简写：左上 右上 右下 左下 */
border-radius: 10px 10px 0 0;

/* 或分别声明 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;

注意 border-radius: 10px 0 只会圆左上与右下（对角），不符合题意。

box-shadow（Q88、Q124）：box-shadow: 3px 5px 10px #000; 中参数依次为水平偏移、垂直偏移、模糊半径、颜色。文本阴影则用 text-shadow——Q124 中要渲染标题的阴影，应使用 class="text-shadow"（配 .text-shadow 规则），因为 #cellar-door 规则用的是 box-shadow，对文字无效。

图标圆形底（Q109）：用 border-radius: 50% + padding 即可为图标造出圆形背景，circle-radius、border-circle 等均不存在。

10.3 transform 与 filter

transform 用于改变形状与位置（Q43、Q85、Q117、Q120）：

element:hover { transform: scale(0.5); }        /* 缩放为 50% */
img#photo:hover { transform: scale(0.5); }      /* 图片悬停缩小一半 */
transform: rotate(-30deg);                      /* 逆时针旋转 30° */
transform: translateY(-100px);                  /* 向上移动 100px */

要点：scale() 参数是倍数（0.5 表示 50%），不是百分比——scale(50%) 与裸 scale: 0.5 属性均无效（Q43、Q85）。translateY 正值向下、负值向上（Q120）。rotate(-30deg) 逆时针（Q117）。

transform-origin（Q32）：默认变换原点在元素中心（50% 50%），而非左上角。

filter（Q129）：图片灰度化用 filter: grayscale(1)（1 表示完全去色，0 表示原色），transform: grayscale() 不存在。

10.4 其他显示属性

• display: none vs visibility: hidden（Q42、Q169）：display: none 把元素从文档流中完全移除，不占空间；visibility: hidden 只隐藏视觉，仍占据原布局空间（Q42、Q169）。visibility 属性的作用就是控制元素可见性（Q165）；
• outline（Q167）：在元素外围绘制可见轮廓，常用于焦点指示与无障碍场景，不影响布局尺寸；
• cursor（Q82、Q166）：cursor: pointer 将鼠标变为手型（hand、move-hand 等均非标准值）；
• box-reflect（Q142）：实现元素的镜像倒影效果；
• overflow-style（Q148）：处理文本溢出时的滚动条样式（marquee 等）;
• accent-color（Q165）：作用于表单输入类元素（checkbox、radio、range 等 input 标签）的强调色；
• inert 属性（Q164 变体题）：元素标记 inert 后会禁用点击、焦点事件，并从无障碍树中移除，但不会让元素变得可交互——"变成可交互"恰是非其效果；
• transition（Q93、Q134）：可过渡的属性包括 margin、color、opacity 等；position 不是可动画属性（Q93 正确选项为 transition: position 400ms linear 无效）。过渡默认是对称的——正向与反向动画互为镜像（Q134）。

十一、响应式：媒体查询与视口

11.1 媒体类型

当前合法的媒体类型为 print、screen、speech（Q26）。aural（已废弃为 speech）、television、device 都不是现行有效类型。

11.2 媒体查询语法与逻辑

Q31 考察逗号与 and 的区别：

@media (min-width: 1024px), screen and (orientation: landscape) { … }

逗号 = 或（OR），因此该规则作用于"宽度 ≥1024px 或 横屏（landscape）的屏幕设备"。若用 and 连接则是"且"关系。这是响应式中最容易踩的坑。

11.3 高清屏（Retina）图片

Q59：要在 400×200 的显示区域呈现清晰效果，Retina（2x）屏需要 800×400 的图片（逻辑分辨率 ×2）。这是图片资源准备中的基本换算。

十二、CSS 的组织与引入：三种方式、@import 与工程实践

12.1 三种引入 CSS 的方式

Q20 给出了三种方式的标准定义：

1. 外部（External）：CSS 写在独立文件中，HTML 通过 <head> 里的 <link> 引用（Q157、Q158）：

<link rel="stylesheet" type="text/css" href="mystyle.css">

<link> 标签必须位于 <head> 内（Q158）。

2. 内部（Internal）：CSS 写在 <head> 内的 <style> 元素里；
3. 内联（Inline）：CSS 直接写在 HTML 标签的 style 属性中。

选择建议（Q160）：样式需应用于多个页面时，外部样式表是最佳实践（一处修改、处处生效）；单页独有样式可用内部样式表。内联样式的优点是便于快速测试局部覆盖（Q63），但不利于维护。

12.2 样式表之间的导入

在 CSS 文件内部引入另一个样式表使用 @import 规则（Q139）：@import url("other.css");。@link、@insert、@style 均不存在。

12.3 reset 样式表

reset（重置）样式表的目的（Q130）：在开始自定义样式前，清除浏览器的默认（user-agent）样式，让各浏览器从统一基准出发。它不是为减少页面体积或提升性能而设计的。

浏览器默认样式在 DevTools 中显示在 Styles 面板右侧的"user agent stylesheet" 区域（Q60）。

12.4 W3C 规范状态

W3C 规范流程中，"Recommendation（正式推荐标准）"代表规范已被现代浏览器完整实现（Q64）；Working Draft（工作草案）与 Candidate Recommendation（候选推荐）都还是演进中的阶段。

12.5 补充：声明与注释

Q65 验证三条声明均有效：color: red;、font-size: 1em;、padding: 10px 0;——0 可以不带单位。CSS 注释的合法写法是 /* ... */（Q125），--、//、# 都不是 CSS 注释语法（// 在部分预处理器中有效，但原生 CSS 不支持）。

十三、SVG 与图标

13.1 SVG 的本质

SVG 是矢量图形格式，可以用 <svg>、<line>、<ellipse> 等专用元素以标记语言方式编码（Q21），而不是 HAML 语言、不是 3D 图形格式。SVG 既支持 CSS 也支持 JavaScript 操作。

13.2 SVG 着色：fill 与 stroke

给 SVG 上色（Q23）：内部填充用 fill，描边/边框用 stroke。不存在 background-fill 这样的属性——fill 与 stroke 是 SVG 特有的绘图属性，不是 CSS 背景属性。

十四、高频陷阱速查表

把题库中的易错点汇总如下，便于复习 css/css-quiz-ua.md 时对照：

考点	正确认知	常见错误
特异性	类选择器 > 元素选择器；ID > 类	认为"写的元素越多权重越高"（Q1）
级联来源	author !important 优先级最高	误以为 user normal 高于 author（Q149）
opacity vs rgba	opacity 影响整元素；rgba 只影响背景	混淆二者作用范围（Q6）
margin 折叠	垂直方向折叠取较大值	误以为相加（Q34）
margin: 0 auto	只水平居中	误以为垂直也居中（Q103）
em vs rem	em 相对自身继承字号；rem 相对根字号	把 em 误算为相对根元素（Q80）
:active	按下未松开	误以为"点击之后"（Q22）
链接顺序	:link → :visited → :focus → :hover → :active	随意排序导致部分状态失效（Q99）
nth-child(3n+2)	第 2、5、8… 个元素	写错为 2n+3（Q46）
flex-direction	写在容器上	写在子项上（Q92）
grid 定位	grid-row / grid-column	写成裸 row / column（Q141）
background 简写	image/attachment 等子属性名	杜撰 background-img、background-scroll（Q14）
transform	scale(0.5) 用倍数	写 scale(50%)（Q43）
颜色合法性	#000/rgb()/#000000 合法	写 000000 无井号（Q33）
单双冒号	伪元素用 ::，IE8 不支持	混淆伪类与伪元素（Q56）
transition	position 不可过渡	认为所有属性都能过渡（Q93）

十五、学习路径建议

1. 第一遍：通读 css/css-quiz-ua.md，把带"变体题"标记的知识点（特异性、z-index、flex-direction、margin 折叠、链接状态等）重点标记；
2. 第二遍：对照本文各章节，用自己的话复述每个考点的原理，并用浏览器 DevTools 实测——例如打开开发者工具验证特异性与层叠（Q60 提到的 user agent stylesheet 区域）；
3. 第三遍：把题库当自测卷，遮挡答案限时作答，重点练习 Q1/Q15/Q54/Q80/Q87/Q94 这类多知识点综合题；
4. 对照阅读：英文原版 css/css-quiz.md 与 中文版 可在术语存疑时交叉查证，仓库 README.md 的 CSS 一行也记录了题量与维护状态。

CSS 技能评估的核心从来不是死记答案，而是对选择器匹配、特异性计算、盒模型、布局模型与单位换算这些底层机制的透彻理解。本文把这 170 余道题的考点浓缩为可验证、可复现的知识框架，配合仓库内的多语言题库反复演练，足以让你在技能评估与真实项目中都游刃有余。