rel="alternate stylesheet"
alternate stylesheet 关键字对，当用作 <link> 元素 rel 属性的值时，表示目标资源是替代样式表。在网页中指定替代样式表允许用户根据他们的需求或偏好查看页面的多个版本。
注意： 在没有扩展的情况下，浏览器对这个功能的支持并不好。要提供符合用户现有偏好的替代呈现方式，请参阅 CSS 媒体特性 prefers-color-scheme 和 prefers-contrast。
Firefox 允许用户通过视图 > 页面样式子菜单选择替代 样式表，该子菜单会显示 title 属性的值。其他浏览器需要扩展才能启用此功能。网页也可以提供自己的用户界面来让用户切换样式。
示例
指定替代样式表
替代样式表使用带有 rel="alternate stylesheet" 和 title="…" 属性的 <link> 元素来指定。例如：
<link href="reset.css" rel="stylesheet" />
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />
在此示例中，“默认样式”、“花哨样式”和“基本样式”将在 Firefox 的页面样式子菜单中列出，其中“默认样式”是预选的。当用户选择不同的样式时，页面将立即使用该样式表重新渲染。
无论选择哪种样式，reset.css 样式表的规则将始终应用。
动手试试
详情
文档中的任何样式表都属于以下类别之一：
- 永久样式表 (具有
rel="stylesheet"，没有title="")：始终应用于文档。 - 首选样式表 (具有
rel="stylesheet"，并指定了title="…")：默认应用，但在选择替代样式表时会被 禁用。只能有一个首选样式表，因此提供具有不同 title 属性的样式表会导致其中一些被忽略。 - 替代样式表 (
rel="alternate stylesheet"，并指定了title="…")：默认禁用，可以选择。
在存在样式表菜单的情况下，当使用 <link rel="stylesheet"> 或 <style> 元素的 title 属性引用样式表时，该 title 将成为用户可选项之一。具有相同 title 的样式表属于同一选项。未带 title 属性链接的样式表始终应用。
使用 rel="stylesheet" 链接到默认样式，使用 rel="alternate stylesheet" 链接到替代样式表。这会告诉浏览器哪个样式表标题应该被默认选中，并在不支持替代样式表的浏览器中应用该默认选择。
规范
| 规范 |
|---|
| HTML # rel-alternate |
| HTML # the-link-is-an-alternative-stylesheet |
| HTML # attr-style-title |
| HTML # attr-meta-http-equiv-default-style |
| CSS 对象模型 (CSSOM) # css-style-sheet-collections |
浏览器兼容性
加载中…