如何将index.css中#preview的样式导入到imported.html关联的CSS文件？

方法1：直接复制样式代码 #

最直接的方式是把index.css里的#preview选择器样式，直接复制到与imported.html绑定的CSS文件中：

/* 粘贴到imported.html对应的CSS文件内 */
#preview {
  display: block;
  font-size: 20px;
  color: #2C2C2C;
}

方法2：使用CSS @import规则同步样式 #

如果希望后续修改index.css里的#preview样式时，目标CSS文件能自动同步，可在目标CSS文件顶部添加@import规则导入整个index.css：

/* 在imported.html对应的CSS文件开头添加 */
@import url('index.css');

若仅需导入#preview而非整个index.css，建议把#preview的样式单独抽离成独立文件（比如preview.css），然后在index.css和目标CSS文件中都通过@import url('preview.css');导入，确保两处样式始终一致。

方法3：在imported.html中直接引入index.css #

如果不需要将样式导入到其他CSS文件，也可以直接在imported.html的<head>里引入index.css，这样通过jQuery加载的#preview元素会自动应用样式：
修改后的imported.html代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- 添加这行引入index.css -->
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="import"></div> 
<script>
$("#import").load("index.html #preview");
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Papillon