测验

第 5 周概念自测，题目取自本周六篇概念文档（CSS基础、伪类、伪元素与内容生成、字体、排印、现代CSS语法、设计规范）。提交后立即看答案与解析。

单选

1. 诗卡挂了 id 与 class。样式表里把 id 选择器那条宽度规则（320px）写在最前面，article 与 .card 的两条写在后面。卡片最终多宽？

480px，写在后面的覆盖前面的 400px，class 比标记名更具体 320px，id 权重最高，与书写顺序无关 无法确定，要看浏览器

2. 样式表里同时有 .card { color } 与 .card p { color }。段落 p 的颜色听谁的？

继承自 .card 的值，因为 .card 是父元素 .card p 直接命中的值，直接命中永远优先于继承 两个值叠加平均 谁写在样式表后面听谁

3. h2 没有任何规则直接命中。样式表里 body { color } 与 .card { color } 都写了值，h2 的颜色是？

body 的值，因为 body 更靠根 .card 的值，继承取最近给出值的祖先 默认值，继承只认 body 无色，没有规则命中就没有颜色

4. 把一份 HTML 的 CSS 全部删掉，页面会怎样？

没有任何样式，只剩一串纯文本 标题仍加粗变大、列表仍有缩进——浏览器自带默认样式表 必须写了 CSS 才会有字号差异 页面无法渲染

5. 关于 CSS 的执行模型，正确的说法是？

CSS 像脚本一样按书写顺序逐条执行 浏览器只收集命中的规则再级联裁决取值，顺序是同权重时的决胜局 每条规则按出现顺序立即改写页面 规则之间互不相干，不存在冲突

6. 面对选择器 .card p，浏览器的匹配方式是？

先找出所有 .card，再逐个翻检里面的 p 对每个 p 自问「我在不在一个 .card 里面」，最右端对不上立即出局 从左到右逐段匹配，效率与书写顺序一致 随机选一段开始匹配

7. a:hover 这种「类」是谁定义的？

设计师在 HTML 里手写的 class 浏览器运行时按状态即时挂上、随时可重估的动态类 JavaScript 事件监听代码挂上去的 CSS 解析器在设计时就预先挂好

8. JavaScript 用 querySelector 去选 .quote::before 生成的内容，选不中。这说明？

选择器写错了，换个写法就能选中 它只在渲染树、不在 DOM 树，本来就够不着——是特性，不是故障 浏览器的 bug 需要开启实验特性才能选中

9. 页面写了 font-family 微软雅黑，而浏览者用的是没有这个字体的 Mac。会发生什么？

服务器把文字渲染成图片发给对方 渲染发生在客户机，要用对方电脑上的字库兑现；找不到就按回退机制逐个尝试后面的值 浏览器自动从官网下载安装该字体 页面报错无法显示文字

10. html 字号 20px，三层嵌套 div 依次是 0.5em、0.5em、2em。最里层 Hello 的字号是？

5px 10px 20px 40px

11. 现代深浅主题切换最省的做法是？

写两套完整样式表，切换时换链接 修改 HTML 结构，给每个元素换类 在 data-theme 一处重新声明变量，所有 var() 引用处自动跟随 用 SCSS 编译出两套类供切换

12. DESIGN.md 治的病与药方是？

AI 画不准风格是因为它笨，DESIGN.md 提供了更长的提示词 病是风格漂移，根子在 AI 对项目无记忆；药方是把设计决策写成常驻文件，每次生成前先读 它是 Figma 的替代品，用来画设计稿 它是给设计师看的操作手册，AI 不需要读

多选

1. 关于样式的引入方式与分离程度，正确的说法有哪些？（多选）

外联是物理分离、整站共享一套样式还能被缓存，是常规做法 内联写在标记的 style 属性里，零分离，只宜调试 嵌入写在文档的 style 标记里，让示例自成一体，教程大量使用 内联是现代推荐的常规写法，样式随标记最直观 tailwind 把原子类写在标记上，等于彻底抛弃了样式层

2. 关于 CSS 的控制边界与排印常识，正确的说法有哪些？（多选）

文本类非置换元素，CSS 可完全控制 用 CSS 可以把一张图片的内容换成另一张图 canvas 内部绘制的内容，CSS 完全无能为力 行长超过约 30~40 个中文字符，就该考虑分栏或限宽 px 是与设备无关的绝对物理尺寸

3. 「渲染发生在客户机」带来的字体现实，正确的说法有哪些？（多选）

font-family 惯例是具体在前、宽泛在后，末位留字体族兜底 用 @font-face 把字体当一项资源，从 Web 服务器下载到客户端再渲染 font-display 取 swap 时，先用回退字体显示，字体就绪后替换，避免文字隐形 中文字体体积大，整库附带进网页是可行做法 图标字体放大后必然模糊

4. 关于伪类、伪元素与内容生成，正确的说法有哪些？（多选）

伪类 first-child 平时纹丝不动，但一插入兄弟元素它立刻换人——仍是运行时的事实 伪类 has() 要等后代全部定局才能算出，匹配方向整个被反转，所以等了二十多年 现代写法里伪类用双冒号、伪元素用单冒号 引号、列表编号这类装饰性内容用 content 生成，写进 HTML 会污染结构 重要内容也应该放进 ::before 里生成，减少 HTML 体积

5. 关于现代 CSS 的可编程特性，正确的说法有哪些？（多选）

原生自定义属性运行时可用、可继承，无需任何构建工具 clamp 一个函数就能实现流动排版，顶过去几段媒体查询 color-mix 能从一个基准色按比例调出深浅透明，配色从孤立色值变成派生色系 SCSS 的变量编译后仍保留在浏览器运行时，随时可覆盖 CSS 嵌套已进原生标准，直接写在 css 文件里就能跑