如何让某一元素内的内容不被reset.css重置？

Question

项目里面有个公告板块，里面的主体内容是富文本编辑器生成的文章内容（会有一些在富文本编辑器编辑的样式），但是这个页面又必须引入reset.css（因为有头部和尾部），现在的问题是reset.css会对cms生成的内容样式造成了影响，请问有什么解决办法吗?

Answer 1

突然在网上看到说用iframe,觉得完全可行啊，把富文本编辑器输出的内容嵌入到一个iframe中就可以完美解决这个问题啊

Answer 2

这个不好弄，我提一个想法，虽然我也没这样做过，给头部和尾部(也就是除了富文本以外的)的每个大的外层div加一个class，这样在重置样式的时候，在样式前面把这个class加上。有点儿像这样:

//reset.css
.xxx_class ul, .xxx_class ol {
    list-style: none;
}

希望这点儿想法对你有所启发和帮助！

Answer 3

没啥好的办法，在富文本编辑器所在的页面的样式重新写回来

Answer 4

用层级的方法，这个想法可以的

Answer 5

做不到，因为样式设置是全局的，就像vue，react所说的可以设置局部样式，其实还是全局样式，只不过是加了个标记，然后私有化了选择器。reset.css是清除统一样式，你可以用normalize.CSS，它是保留统一。

Answer 6

你可以在特定的地方的样式上加上!important声明，但是不推荐过度使用

Answer 7

很多人都喜欢reset重置默认样式，但是不推荐。个人无所谓，团队的话，要么不用，要么使用统一的。

Answer 8

添加 not-reset.scss

.not-reset{
  img{}
  p{}
...去bootstrap里拷贝一些基础样式
}

在reset.css后边引用，有需要的地方添加class