不能用$.get()或$.ajax()加载CSS文件，因为它们仅返回CSS文本字符串，无法触发浏览器原生样式解析机制，导致丢失缓存、@import、媒体查询等关键能力；正确做法是动态创建并插入<link rel="stylesheet">标签到<head>中。
直接用 $("<link>") 创建并插入即可，但必须注意加载时机和缓存行为，否则 CSS 可能不生效或重复加载。
为什么不能用 $.get() 或 $.ajax() 加载 CSS 文件
CSS 文件不是数据，而是样式资源；$.get() 返回的是字符串内容（比如一堆 CSS 规则文本），但浏览器不会自动解析它为样式规则。你手动 .append() 进去也不会生效，除非再用 <style> 标签包裹并插入 <head> —— 但这绕过了浏览器原生的 CSS 加载机制，丢失了缓存、媒体查询、@import 解析等能力。
-
$.get("theme.css")拿到的是纯文本，$("#target").html(data)只是把文本当 HTML 渲染，不触发样式解析 - 即使用
$("<style>").text(data).appendTo("head")，也无法支持@media、@font-face的完整行为，且无缓存 - 老项目 jQuery 版本（如 1.12 / 2.1）不提供
$.loadCSS()这类封装，得自己写轻量逻辑
推荐做法：动态创建 <link> 标签并插入 <head>
这是最接近原生 <link rel="stylesheet"> 的方式，兼容 IE9+，支持缓存、HTTP 头、preload 等标准行为。
- 用
$("<link>", { rel: "stylesheet", type: "text/css", href: "path/to/style.css" })构造元素 - 务必
.appendTo("head")，不能插到<body>或任意 div 中（否则无效） - 可加
id属性用于后续查重：id: "theme-v2"，避免重复引入同一份 CSS - 若需监听加载完成，老版 jQuery 不支持
onload事件绑定（IE8- 不支持），可用link.onload = function(){...}，但 IE9+ 才可靠；更稳妥的做法是定时检测document.styleSheets中是否已存在该 CSS 的href
示例：
立即学习“前端免费学习笔记（深入）”；
$("<link>", {
rel: "stylesheet",
type: "text/css",
href: "/css/dark-theme.css",
id: "dark-theme-css"
}).appendTo("head");容易踩的坑：跨域、重复加载、IE 兼容性
老项目常跑在 IE10/11 下，而动态 <link> 在 IE 中有特殊限制：
- 跨域 CSS（如 CDN 上的样式）会被 IE 阻止加载，且不抛 JS 错误，只静默失败 —— 必须确保同源，或服务端配
Access-Control-Allow-Origin - 重复插入相同
href的<link>会导致多次请求，建议先查重：if (!document.getElementById("dark-theme-css")) { ... } - IE9 不支持
link.onload，但支持link.onreadystatechange，状态为"loaded"或"complete"时才算加载完毕 - 不要在
$(document).ready()里延迟插入 —— 若 CSS 影响首屏渲染，应尽早执行（比如放在<head>末尾的 script 中）
真正麻烦的不是“怎么加”，而是“加完后样式没生效却找不到原因”：检查是否插错位置、是否跨域、是否被其他 CSS 覆盖、是否 IE 下没触发 onload —— 这些细节比语法本身更消耗调试时间。
