不应用不同标题的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

请参阅MDN上的Correctly Using Titles With External Stylesheets和Alternative style sheets或A列表中的Alternative Style: Working With Alternate Style Sheets。

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

• 持久（无rel="alternate"，无title=""）：始终适用于该文档。
• 首选（无rel="alternate"，指定了title="..."）：默认情况下已应用，但如果选择了备用样式表，则会被禁用。 只能有一个首选样式表，它解释了第3个示例中的行为。
• 备用（必须指定rel="stylesheet alternate"，title="..."）：默认情况下禁用，可以选择。

您的document.styleSheets[i].ownerNode.id解决方案对我来说很好。