如何覆盖CSS类的子节点？

Question

我想创建一个div，因此它的子节点不能覆盖我的默认CSS类。

例如：

＆＃13;

＆＃13;

.content  { color:red; }

＆＃13;

<div class="content">
		<p style="color:green">Hello</p>
		<p style="color:blue">World !</p>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望文字颜色为红色＆＃39;。原因是div的内容来自人类的输入，我不希望它们修改字体，颜色，大小...

我认为，而不是＆＃34;颜色：红色！重要;＆＃34;不适用于子节点。

Answer 1

  

我认为比“颜色：红色！重要;”不适用于子节点。

你可以编写一个像.content, .content * { }这样的选择器...但是提交的数据可以通过在style属性中使用!important来覆盖它，所以它不是一个有效的解决方案。

执行此操作的唯一方法是更改​​段落上的样式属性。从样式表中无法做到这一点。

快速而脏的选项是使用JavaScript循环遍历所有元素并删除样式。

更好的方法，因为你说：

  

div的内容来自人工输入，我不希望他们修改字体，颜色，大小

...将在您的服务器上放置一些适当的XSS保护，以消除外部输入。

您应该使用DOM感知白名单解析器（例如，如果您的服务器端代码是用PHP编写的，则使用HTML Purifier）。

Answer 2

确实你可以使用！important来覆盖子节点中定义的样式，我已经修改了你的.content类了，运行代码片段看看

＆＃13;

＆＃13;

.content * { color:red !important; }

＆＃13;

<div class="content">
		<p style="color:green">Hello</p>
		<p style="color:blue">World !</p>
</div>

＆＃13;

＆＃13;

＆＃13;