带title属性的多CSS引入失效：jQuery插件样式无效果问题排查

这个问题我之前也踩过坑！核心是HTML里<link rel="stylesheet">的title属性有个容易被忽略的规则：带title的样式表会被浏览器归类为「可替换样式表」体系中的「首选样式表」，默认情况下浏览器只会启用第一个不带alternate关键字的带title样式表，其余同类型的样式表会被自动禁用。

具体原因拆解： #

• 当你不给<link rel="stylesheet">加title时，它属于「持久样式表」，浏览器会无条件启用所有这类样式表。
• 一旦加上title属性，它就变成了「首选样式表」。浏览器的默认逻辑是：同一文档中，同一时间只能激活一组首选样式表（即第一个被加载的那一个），其他带不同title的样式表虽然会被加载，但不会生效——除非用户通过浏览器的「页面样式」手动切换启用。
• 你移除第二个CSS的title后，它变回了「持久样式表」，自然就被浏览器正常启用了。

解决方案 #

根据你的需求，有几个可行的处理方式：

1. 最推荐：移除所有样式表的title属性
   如果你不需要让用户手动切换页面样式，完全没必要给样式表加title。你的JS要插入CSS规则的话，可以给<link>标签加个id来定位，比如：

   <link rel="stylesheet" href="/apps/filter/css/style.css" id="filter-style">
   

   然后在JS里通过document.getElementById('filter-style').sheet来操作样式表，比依赖title更可靠。

2. 将多个样式表归为同一title组
   如果一定要保留title，可以给所有需要同时启用的CSS设置相同的title值，浏览器会把它们当成同一组首选样式表，全部启用：

   <link rel="stylesheet" href="/apps/calendar/css/style.css" title="plugin-styles">
   <link rel="stylesheet" href="/apps/filter/css/style.css" title="plugin-styles">
   

3. 手动启用可替换样式表（不推荐）
   给第二个样式表加上rel="alternate stylesheet"，然后通过JS手动切换启用，但这种方法完全没必要，反而增加复杂度，不建议用。

简单来说：不是只能有一个带title的CSS，而是不同title的首选样式表默认只会激活第一个，相同title的会被同时激活。

内容的提问来源于stack exchange，提问作者B. Ma