User-Agent Stylesheet
每个浏览器都内置一份样式表(Chromium 是 html.css、Firefox 是 html.css/forms.css),在写任何 CSS 之前就先跑。它针对具体标签覆盖 Level 1 的初始值,给 HTML
一套「开箱即用」的外观:标题大而粗、段落有上下间距、列表有项目符号和缩进、链接是蓝色带下划线、按钮长得像按钮。
下面这段 HTML 默认按 UA 样式渲染。剥离 UA 样式这一档给演示区里的常见标签强制 all: initial(all 不含 direction / unicode-bidi 与自定义属性,故不是「退回纯粹的 initial value」,也不等于「没有 UA 样式表」),观察它塌缩成的样子——这就是没有 UA
时,页面只剩 Level 1 初始值的呈现。
1 · UA stylesheet 里大概写了什么
下面是 Chromium UA 样式表的代表性规则(简化)。注意每条几乎都在覆盖某个属性的 initial value:
html, body, div, h1, p, ul, ol, li, blockquote { display: block } /* initial 实为 inline */
li { display: list-item }
body { margin: 8px } /* 页面四周的留白 */
h1 { font-size: 2em; font-weight: bold;
margin-block: 0.67em }
p, blockquote { margin-block: 1em }
ul, ol { margin-block: 1em; padding-inline-start: 40px;
list-style-type: disc /* ol → decimal */ }
strong, b { font-weight: bold }
a:any-link { color: -webkit-link; text-decoration: underline;
cursor: pointer }
button { appearance: auto; /* 一整套原生外观 */ }
想查某个标签完整的 UA 默认值、或对比它在不同引擎下的差异?推荐 Browser Default Styles——可搜索的 UA stylesheet 数据库,按标签列出它在 Blink(Chrome)/ WebKit(Safari)/ Gecko(Firefox)/ Trident(IE)各引擎下的默认规则,比翻浏览器源码快得多。
它的优先级在哪?UA stylesheet 属于 user-agent origin,优先级低于
author 与 user 样式,所以一条 h1 { font-size: 20px } 就能覆盖它的普通声明——无需 !important。反过来,UA origin 里带 !important 的声明(如 Chromium 对隐藏输入框的 display: none !important)高于 author 的一切声明,author 加
!important 也压不过。CSS-wide 关键字页的 revert 会先退到 user origin,user 没有声明时才落到这一层。