CSS - 是否可以在没有页面的css规则的情况下拥有div html（在页面中）

Question

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

我有一个网页内容，文本部分保存为html。在我的jsp中，我有：

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

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

Thnaks！

Answer 1

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

.someDivClass{
  all: initial;
}

这将删除此元素上所有应用的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>s将变为内联），因此您必须将这些样式添加回来 - 例如：

.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

虽然其他答案（所有：首字母）都很好，但这是另一个方面：你可能想要一些风格，所以你可能在你的主题中有一个更具体的风格。有些浏览器在Gray上默认为黑色，在白色上为黑色。