CSS-是否有一个div html（在页面中）而没有页面的CSS规则

Question

我在Liferay门户网站上遇到问题。

我有一个Web内容，其文本部分另存为html。在我的jsp中，我有：

 <div>${aWebContent.content}</div>

但是该页面包含一个应用于所有页面（liferay主题）的css，我不希望将此应用于我的div。 是否存在解决方案？

感谢！

Answer 1

您可以通过设置CSS的.specialchild属性来取消设置元素的所有样式。

all

这将删除该元素本身或父元素在此元素上应用的所有CSS，并将重置为初始值。

有关更多详细信息，请参阅-https://developer.mozilla.org/en-US/docs/Web/CSS/all

并非所有浏览器都支持此属性，要了解对浏览器的支持，您可以点击以下链接-https://caniuse.com/#search=all

Answer 2

一种选择是将您的窗口小部件嵌入iframe中；这样，周围文档中的样式都不会被继承。这是许多社交小部件（例如共享按钮）使用的方法，因此不会出现任何样式干扰。

有些纯CSS选项开始推出。 Safari支持：

.widget { all: revert; )

这正是您所追求的。对以下内容有更多支持：

.widget { all: initial; )

所有现代浏览器（不是Internet Explorer）都支持

，但是会将样式剥离回 浏览器的默认值（例如<div>将成为嵌入式），因此您必须添加这些返回-例如：

.widget block { display: block; }

但是至少您不会遇到样式冲突。

https://developer.mozilla.org/en-US/docs/Web/CSS/initial
https://developer.mozilla.org/en-US/docs/Web/CSS/revert

Answer 3

虽然其他答案（全部：首字母缩写）都不错，但这是另一方面：您可能想要某种风格，因此您也可以在主题中使用更具体的风格。某些浏览器默认将灰色设为黑色，而某些则将白色设为黑色。