为什么<link>'title'属性导致浏览器忽略我的样式？

Question

以下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">修复它,但我没有看到原因,为什么它应该.标题在做什么,这里,这使得这个错了？

Answer 1

HTML 4.0规范声明有三种样式表:persistent,preferred和alternate.

• 如果样式表与其链接rel="stylesheet"且没有title属性,则它是"持久的" .渲染时使用所有持久样式表.
• 如果样式表与链接rel="stylesheet"并具有title属性,则它是"首选" ; 具有相同的首选样式表title组合在一起,但不应该有多个组.浏览器似乎只会选择一个首选样式表来呈现,因为应该只有一个.
• 最后,如果样式表与之链接rel="alternate stylesheet"并具有一个"样式表",则它是"备用的" title.这些样式表应该允许用户选择样式表,它们被组合在一起title并显示在浏览器的样式表选择器中(如果它有一个(Firefox中的View >> Page Style)).每组(按标题)是互斥的.

通过title在样式表上放置属性,您无意中将它们变成首选样式表而不是预期的持久样式表.这也是他们在拥有相同头衔时工作的原因.