Javascript HEAD中链接和样式元素的求值顺序_Javascript_Html_Css_Dom_Stylesheet

Javascript HEAD中链接和样式元素的求值顺序

javascript html css dom

Javascript HEAD中链接和样式元素的求值顺序,javascript,html,css,dom,stylesheet,Javascript,Html,Css,Dom,Stylesheet,在我看来，所有现代浏览器，包括最新版本的Chrome、Safari和FireFox（可能从一开始）都尊重样式和链接元素在标题中的顺序；即使在运行时使用JavaScript动态创建和添加例如，这里的red.css和green.css都指定了主体背景颜色；第一个将主体背景设置为红色，第二个将其设置为绿色： <head>  <link rel="stylesheet" href="red.css" type="tex

在我看来，所有现代浏览器，包括最新版本的Chrome、Safari和FireFox（可能从一开始）都尊重

样式和链接元素在标题中的顺序；即使在运行时使用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>

red.css的内容
：
body { background-color: red; }

body { background-color: green; }

green.css的内容
：
body { background-color: red; }

body { background-color: green; }

您所指的是级联—级联样式表（CSS）工作方式中的一个非常重要的功能。包括IE在内的所有浏览器都是这样工作的。如果它们不级联，这将是一个大问题
然而，有些风格在IE的某些版本中不起作用——也许你看到的是，风格不能正常工作，而不是级联不能正常工作。您想发布一个具体的示例吗？
如果您不重新添加样式表，而是切换样式表的一个属性以强制重新呈现，那会怎么样？例如，您可以尝试迭代所有链接
/样式
元素，将它们的媒体
属性设置为无
，然后将其重新设置为原始属性。
您没有通过插入样式表告诉我们您真正想要解决的问题的细节，但可能有更好的方法来解决实际问题，而不是在列表中按特定顺序动态插入样式表
例如，您可以将两个样式表（稍加修改以关闭另一个类）都放在适当的位置，通过在
标记中添加或删除单个类，您可以触发从绿色到红色的更改，反之亦然。
您是说，如果文档只有第二个链接，那么第一个链接将在第二个链接之前动态添加，在IE中，第一个链接优先？也就是说，它没有正确地“级联”吗？你能提供一个测试用例吗？@RobG，没错。在我所有的测试中，IE在动态创建链接
元素时都是这样。几乎所有其他浏览器都尊重放置顺序。这个问题似乎一直存在于IE9中，您的想法是按所需顺序动态添加所有样式表，这可能是您能做的最好的。哦，如果您在示例中调用样式表red.css
和green.css
：-）@RobG感谢您尝试IE9，我将更新我的问题以包含它。我想推搡也许是最好的解决办法。哦，这也是一个好主意，我将重命名这些表：）级联在IE上工作，但是当新的链接
或样式
元素在运行时动态创建和添加时，它们将在现有级联的基础上进行评估，而不管它们放置在何处。问题是，当动态添加时，IE中的树顺序没有得到尊重。我希望像所有其他浏览器一样，重新评估整个级联。也许这不是标准行为？我明白了。这就是你说的吗？谢谢@Zenkati，我也看到了。这个问题不像我的问题那样涉及级联的评估顺序。谢谢@o.v.，这是一个有趣的想法，它不像移除和添加元素那样具有侵入性。我会试试看，看看效果如何！这是一种魅力！这真的救了我的命谢谢你的洞察力，我确实意识到有些问题是可以通过避免它们来解决的。然而，这里的情况并非如此。这是一个非侵入性的JS库。这个问题其实很容易解决，我们只是想尽量减少用户射中自己脚的方式。