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

Question

I'm facing an issue on my Liferay portal.

I have a web content with a text part saved as html. In my jsp, i have :

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

But the page include a css that is applied on all page (liferay theme) and i don't want this to be applied on my div. Does a solution exist to do this ?

Thnaks !

Answer 1

You can unset all style of an element by setting all property of CSS.

.someDivClass{
  all: initial;
}

This will remove all applied CSS on this element either by its own or by its parent and will reset to initial value.

For more detail you can refer to - https://developer.mozilla.org/en-US/docs/Web/CSS/all

This property is not support in all browser, in order to find out the browser support you can follow this link - https://caniuse.com/#search=all

Answer 2

One option is to embed your widget inside an iframe; as such, no styles from the surrounding document get inherited. This is the method used by many social widgets, such as share buttons, so that there isn't any style interference.

There are CSS-only options beginning to be rolled out. Safari supports:

.widget { all: revert; )

which does exactly what you're after. There's greater support for:

.widget { all: initial; )

which is supported by all modern browsers (not Internet Explorer) but strips styles back beyond the browser defaults (eg <div> s will become inline), so you will have to add those back in - for example:

.widget block { display: block; }

But at least you won't get style clash.

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

Answer 3

While the other answers (all:initial) are good, here's another aspect : you might want to have some style, so you might as well have a more specific style in your theme. Some browsers default to black on Grey, some black on white.