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

The HTML 4.0 spec states that there are three kinds of stylesheets：持久，首选和替代。

如果样式表与rel="stylesheet"关联且没有title属性，则该样式表是“持久的”。渲染时使用所有持久样式表。
如果样式表与rel="stylesheet"关联并且具有title属性，则该样式表是“首选”;具有相同title的首选样式表被组合在一起，但不应该有多个组。浏览器似乎只会选择一个首选的样式表进行渲染，因为应该只有一个。
最后，如果样式表与rel="alternate stylesheet"关联并且具有title，则该样式表是“备用的”。这些样式表应该允许用户选择样式表，它们按title组合在一起，并显示在浏览器的样式表选择器中（如果它有一个）（在Firefox中查看＆gt;＆gt;页面样式）。每个组（按标题）是互斥的。

通过在样式表上添加title属性，您无意中将它们变成首选样式表而不是预期的持久样式表。这也是他们都有相同头衔的原因。

Answer 2

跟进Neil Williams的回答：

作者可以指定一些名为备用样式表的互斥样式表....用户代理应该允许用户从备用样式表中进行选择。

（强调补充）

此外：

要首选样式表，请将rel属性设置为“stylesheet”，并使用title属性命名样式表。

这是http://www.w3.org/TR/REC-html40/present/styles.html#h-14.3.1

Answer 3

阅读本文：http://blogs.telerik.com/dimodimov/posts/08-05-15/title_attributes_in_css_link_tags_prevent_styles_from_being_applied.aspx

我已经知道了一段时间了   CSS中的标题属性   标签触发问题并阻止一些   CSS样式应用于   网页。今天我投资了几个   找出实际的时间   发生了，这就是我们所拥有的。

如果您有多个标签   页面，其中一个有一个   title属性，然后是标签   它必须要有一个   title属性具有相同的值或   没有title属性，否则   后者CSS文件中的样式   不会在页面上应用。

这个问题可以轻松复制   各种版本的Firefox，Opera和   苹果浏览器。这是唯一的浏览器   没有表现出意外的行为   Internet Explorer。

非常奇怪o.o

Answer 4

我花了大约3个小时才到达它，因为我正在添加一个新的样式表包含。我以为我在现有的CSS规则和我添加的规则之间存在一些冲突。在用完理想选项后，我尝试从链接中删除标题标记。我没想太多，认为这是一些无用的元数据。好吧，事实证明这是阻止CSS被解析的原因。事实证明，关于brainfart CSS标准的陈旧委员会提出了这个问题。难道他们只是添加了一个更清晰的新属性，因为它们的首选功能（不管它应该做什么）而不是依赖于title属性的存在与否？我失去了应该投入到做一些富有成效的事情上的所有时间。在我的搜索过程中，我向自己承诺，一旦找到问题的根源，我就会采取措施。现在，仍然需要决定措施。

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

4 个答案: