Javascript 不应用具有不同标题的CSS样式表-即使没有rel="；备选方案；

我希望对以下渲染逻辑有更深入的了解：

这些样式表最初都没有应用：

<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>

应用的两个样式表：

<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>

应用的第一个样式表：

<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，并省略了标题-但我想进一步了解他们实现此逻辑的原因…对我来说，两个不同的标题意味着两个不同的样式表，因此应该呈现它们。

请参见MDN上的和或列表上的和

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

• 持久性（no

  rel=“alternate”

  ，no

  title=”“

  ）：始终适用于文档
• 首选（无

  rel=“alternate”

  ，并指定了

  title=“…”

  ）：默认情况下应用，但如果选择了备用样式表，则禁用只能有一个首选样式表，这解释了第三个示例中的行为
• Alternate（

  rel=“stylesheet Alternate”

  ，必须指定

  title=“…”

  ）：默认情况下禁用，可以选择

您的

document.styleSheets[i].ownerNode.id

解决方案在我看来不错