以下 html 文档(连同 CSS)无法呈现 b.css 中的样式.
<!doctype html>
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="A" href="a.css" />
<link rel="stylesheet" media="screen" type="text/css" title="B" href="b.css" />
</head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
/* a.css */
div#A { color: blue; }
/* b.css */
div#B { color: red; }
使标题相同(例如 <link ... title="A"> 修复它，但我不明白原因，为什么它应该。标题在做什么，在这里，这是错误的？
最佳答案
The HTML spec states that there are three kinds of stylesheets : 持久的、首选的和替代的。
- 如果样式表与
rel="stylesheet"链接并且没有title属性，则样式表是“持久的”。呈现时会使用所有持久样式表。 - 如果样式表与
rel="stylesheet"链接并具有title属性，则该样式表是“首选”；具有相同title的首选样式表被分组在一起，但不应超过一组。浏览器似乎只会选择一个首选样式表来呈现，因为应该只有一个。 - 最后，如果样式表与
rel="alternate stylesheet"链接并具有title，则它是“alternate”。这些样式表应该允许用户选择样式表，它们按title组合在一起，并显示在浏览器的样式表选择器中(如果有的话)(在 Firefox 中为 View >> Page Style)。每个组(按标题)是相互排斥的。
通过将 title 属性放在您的样式表上，您会在不知不觉中将它们变成首选样式表，而不是预期的持久样式表。这也是当它们都具有相同标题时它们起作用的原因。
关于html - 为什么 <link> ‘title’ 属性会导致浏览器忽略我的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1959959/