如何为页面的特定部分包括CSS

Question

在我的网站上，用户必须在我使用减价编辑的文本框中输入标记。问题是:它使用图标字体，我的网站也是如此。两种方法都使用相同的类来定义字体，但不是同时使用相同的图标。问题很简单:是否有方法为特定的div定义editor.css？

就像这样：

<div css="editor.css"></div>

Answer 1

命名空间您的编辑器样式

您可以添加一个选择器，该选择器可以对编辑器进行命名空间，并允许您对其进行样式设置：

<div class="editor-style">
  <div id="cool-custom-editor">...</div>
</div>

在您的css中：

.editor-style .icon-thumbs-up { color: green; }

使用作用域样式(需要填充)

正如@adeneo在您的问题下面的评论中提到的，可以选择使用作用域样式的标记。

假设您的编辑器如下所示：

<div id="cool-custom-editor">...</div>

可以使用scoped属性应用特定的样式，如下所示：

<div>
  <style scoped>@import url(editor.css);</style>
  <div id="cool-custom-editor">...</div>
<div>

注意事项

根据我能用的 scoped属性只有火狐26+本机支持。

如果您想使用它，您将不得不填充：

• 普通JavaScript填充
• jQuery作用域插件

进一步阅读

• HTML5医生-作用域属性
• CSSTricks -使用限定范围的样式节省时间
• HTML5Rocks --一种新的实验特征--作用域样式

Answer 2

给DIV一个类，然后添加如下所示的CSS文件：

.markdown
{
color: red;
}

如果您导入一个新的css动态，旧的样式将被覆盖。

一些帮助，用于动态css加载：如何使用jQuery动态加载内联和/或外部CSS

Answer 3

你不需要多个文件。您可以给div一个id或类如下所示

  <div class="div1">
      <span></span
    ...
  </div>

现在在你的css中你可以这样做

   .div1 span{
        font:(whatever font);
     }