HEAD中LINK和STYLE元素的求值顺序

Evaluation order of LINK and STYLE elements in HEAD

本文关键字：顺序 元素 STYLE LINK HEAD      更新时间：2023-09-26

在我看来，所有现代浏览器，包括最新版本的Chrome、Safari和FireFox（可能从一开始），都尊重head中style和link元素的顺序；即使在动态创建并在运行时使用JavaScript添加时也是如此。

例如，这里red.css和green.css都指定主体背景颜色；第一个设置机身背景为红色，第二个设置为绿色：

<head>
    <!-- other code -->
    <link rel="stylesheet" href="red.css" type="text/css">
    <link rel="stylesheet" href="green.css" type="text/css">
</head>

结果是，由于green.css被放置在red.css之后并且随后被评估，所以主体的背景颜色是绿色。

即使动态创建link元素并将其插入头中，元素的排序似乎也是正确的。例如，动态创建一个加载green.css的link元素，如果它插入在red.css之后，则只会将主体背景颜色设置为绿色。

然而，唯一不尊重这一点的浏览器似乎是Internet Explorer（至少IE 7-9不尊重）。对于IE，最近添加的link或style元素似乎是在已经评估的所有元素之上评估的；在运行时添加时，它不尊重树顺序。

尊重订单是非标准行为，还是这是Internet Explorer的错误？如何为Internet Explorer修复此问题？

我提出的一个想法（有效）是动态删除所有现有的link和style元素，并按相同的树顺序将它们添加回来——这就是我希望对它们进行评估的顺序。

如有任何见解，我们将不胜感激。

更新

根据要求，这里有一个更详细的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="red.css" type="text/css"> <!-- sets red -->
</head>
<body>
<script type="text/javascript">
    setTimeout(function() {
        // IE7-8 does not support referencing document.head
        var head = document.getElementsByTagName("head")[0];
        var link = document.createElement("link");
        link.setAttribute("href", "green.css");
        link.setAttribute("rel", "stylesheet");
        link.setAttribute("type", "text/css");
        // All modern browesers will leave the background
        // color red, except IE will set it green.
        head.insertBefore(link, head.firstChild);
        // Now comment out the above line and try adding the link
        // using this instead. All modern browsers (including IE)
        // will set the body background color green after two seconds.
        // IE seems to always evaluate the last dynamically added link.
        // head.appendChild(link);
    }, 2000);
</script>
</body>
</html>

red.css:的内容

body { background-color: red; }

green.css:的内容

body { background-color: green; }

如果不是重新附加样式表，而是切换样式表的一个属性以强制重新渲染，该怎么办？例如，您可以尝试对所有link/style元素进行迭代，将其media属性设置为none，然后将其重新设置为原始属性。

您没有告诉我们您真正想通过插入样式表来解决什么问题的细节，但很可能有更好的方法来解决真正的问题，而不是在列表中按特定顺序动态插入样式表。

例如，您可以将两个样式表（稍作修改以关闭另一个类）都放在适当的位置，通过向<body>标记添加或删除一个类，您可以触发从绿色到红色的更改，反之亦然。

您所指的是CASCADING-CASCADING样式表（CSS）工作方式中的一个非常重要的功能。所有浏览器都是这样工作的，包括IE。如果它们不级联，那将是一个大问题。

然而，有些样式在某些版本的IE中不起作用——也许你看到的是样式不能正常工作，而不是级联不能正常工作。你想发布一个具体的例子吗？

相关文章：