javascript - 不应用具有不同标题的 CSS 样式表 - 即使没有 rel ="alternative"

Question

我想更深入地了解以下渲染逻辑:

最初没有应用这些样式表:

<link rel="alternate stylesheet" title="x">
<link rel="alternate stylesheet" title="x">

应用了两个样式表:

<link rel="stylesheet" title="x">
<link rel="alternate stylesheet" title="x">

应用的第一个样式表:

<link rel="stylesheet" title="x">
<link rel="stylesheet" title="y">
// OR
<style title="x"></style>
<style title="y"></style>

我了解前两种情况，但不了解最后一种情况 - 最近花了我一些时间。因为如果您添加两个具有不同标题的样式元素，它会创建两个具有不同标题的 CSSStyleSheet 对象。因此我认为我们可以通过它的标题来识别 CSSStyleSheet 并修改它的 cssRules 但第二个从未被渲染过。所以最后我设置了你可以通过 ownerNode.id 访问的 id 并留下了标题 - 但我想更深入地了解为什么他们已经实现了这个逻辑......对我来说是两个不同的标题将意味着两个不同的样式表，因此应该呈现它们。

Answer 1

参见 Correctly Using Titles With External Stylesheets和 Alternative style sheets在 MDN 或 Alternative Style: Working With Alternate Style Sheets在 A List Apart 上。

简而言之，样式表始终是以下之一:

• 持久性(无rel="alternate"，无title=""):始终适用于文档。
• Preferred(无 rel="alternate"，指定了 title="..."):默认应用，但禁用如果选择了备用样式表。 只能有一个首选样式表，它解释了第三个示例中的行为。
• Alternate(必须指定rel="stylesheet alternate", title="..."):默认禁用，可以被选中。

我觉得你的 document.styleSheets[i].ownerNode.id 解决方案不错。