Question

在我的网站中，用户必须在textarea中输入markdown，我正在使用a markdown editor。问题是：它使用icomoon字体，也使用我的网站。两者都使用相同的类来定义字体，但两者都不使用相同的图标。问题很简单：有没有办法为特殊的div定义editor.css？像那样：

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

谢谢你。请，只是投票是没用的。投票和评论。

Answer 1

给DIV一个类，然后添加一个这样的CSS文件：

.markdown
{
color: red;
}

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

动态css加载的一些帮助：How to apply inline and/or external CSS loaded dynamically with jQuery

Answer 2

你不需要多个文件。你可以给div一个像这样的id或类

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

现在你用css做这个

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

Answer 3

命名空间您的编辑器样式

您可以添加一个选择器，用于命名编辑器，并允许您设置样式：

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

在你的css中：

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

使用Scoped样式（需要polyfill）

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

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

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

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

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

注意事项

According to can I use {26} +本地支持scoped属性。

如果你想使用它，你必须进行polyfill：

进一步阅读

Answer 4

我不这么认为，不。至少没有使用任何js变通办法。最好的解决方案是为用户特定的css类使用一种命名空间。

Answer 5

不，你不能这样做..我认为你应该通过更改此文件中的icomoon类名来解决冲突。

Answer 6

OK解决了：在编辑器中为icomoon重命名类比我敢于坚持要容易得多。

Answer 7

不是一个好方法，但它可以帮助：

$("[css]").each(function(i){
    var elm = $(this);
    $.when($.get(elm.attr("css"))).done(function(response) {
        var newresponse=response.replace(/(.+{)/gi,".customCss"+i+" $1");
        elm.addClass("customCss"+i);
        elm.before('<style>'+newresponse+'</style>');
    });
});

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

7 个答案:

命名空间您的编辑器样式

使用Scoped样式（需要polyfill）

注意事项

进一步阅读