CSS - 清晰的元素样式

Question

我正在使用tinymce wysiwyg为我的网站创建一些漂亮的说明。 我只是将html生成的代码保存到我的数据库中，并在页面上显示该HTML。

由于我的网站已经加载了自己的样式表，因此根据样式的要求（例如<ul>，<li>或<p>标记），某些内容会显示出来。

如果从tinymce生成任何这些标记，我的网站的样式表将为其设置样式。

在黑暗中拍摄 - 是否存在使浏览器忽略位于特定元素内的所有样式的样式？

对于视觉辅助，这里是tinymce的快照以及我正在制作的内容：

以下是我网站上显示的html的快照：

（此html位于<div id="tinymce_html"><?php echo $tinymce_html; ?></div>）

内

这是在main.css样式表中影响它（站点范围）的css

ol, ul {
  list-style:none;
  padding: 0;
  margin: 0;
}

顺便说一句，我只是举例说明<ul>标签的结果。我相信我会遇到更多的标签。 （因此我的原始问题 - “是否有一种风格使浏览器忽略了特定元素中的所有样式？”）

我不想做的是为与tinymce或其他html相关的任何内容创建一个全新的样式表，而不受任何网站样式的影响。< / p>

Answer 1

在开始新项目之前始终使用“reset css”！

看看this。

将此样式复制粘贴到代码上方，然后从此处开始。它重置了所有元素。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 2

看起来您想要应用css重置样式表。 看看here并选择一个最适合您的那个。

您必须使用custom_css tinymce配置选项将此css添加到编辑器中。