如何重置html文档中间的css？

问题描述 投票：0回答：3

我想知道是否有可能在页面中间重置CSS？我有主要样式，但在一个区域我想使用tinyMCE生成源中的样式。 因此，在tinyMCE源代码中，编辑器中的元素看起来像默认浏览器样式（或用户想要的样式），但在其他页面中使用我的主css和自内联样式中的样式。所以我把两只蚂蚁混在一起，看起来很糟糕。我不知道如何在没有 iframe 的情况下重置主要样式。

谢谢

html css tinymce
3个回答
7
投票

您的意思是，有一组 CSS 规则应用于页面的顶部，而一组重置的规则应用于其余部分？没办法，做不到，抱歉。

我处理此类问题的方法通常是将有问题的内容嵌入到包装器中

<div class='wysiwyg_html'>
，然后为该内容设置特定的样式指令：

.wysiwyg_html p { display: inline }
.wysiwyg_html a { text-decoration: underline }
.... and so on

如果需要，您可以将整个重置样式表应用到

wysiwyg_html
内部的所有内容。

0
投票

这很简单，我将通过“穷人”重置来展示这一点，但其他人（埃里克·梅耶尔等）的工作方式相同：

* {
padding: 0;
margin: 0;
}

div {
 padding: 50px;
}

#content *{
 padding: 0;
 margin: 0;
}

现在 #content 中的 div 应该重置为 padding: 0;再次强调，因为 id 选择器胜过元素选择器，所以您唯一需要确保的是第二次重置时有一个比其他选择器更重要的选择器（但不要使用 important！）。

0
投票

添加到您的 CSS 文件：

p {
  color: blue;
}

.wysiwyg_html * {
  all: initial;
}

.wysiwyg_html p {
  color: green
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <div>
    <p>This is outside area</p>
    <div class="wysiwyg_html">
      <p>This is inside area</p>
    </div>
  </div>
</body>

</html>

然后将 wysiwyg_html 类添加到包装要重置的 html 区域的元素。
现在您可以在那里编写以 .wysiwyg_html 开头的新 css 规则

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.