如果在特定元素中，则忽略 CSS 规则

Question

Let's say I have a class called .root which contains a lot of CSS rules which applies to almost all of my website.

I also have some "special" elements (included in the .root one), but I don't want to apply the .root rules to whatever is included in .special elements. I don't want to "override" all root rules, just not apply them.

Is it possible using only CSS?

Thank you!

 .root { color: blue; /* Lots of other styles */ }.special { font-weight: bold; }

 <div class="root"> This is blue <div class="special"> <span>This is bold and blue, but I'd like this to be only bold</span> </div> </div>

Answer 1

you can use value property:initial to one property to the have the initial value of this property

or you can use all: initial to set all value of a selector to their inital value

https://developer.mozilla.org/fr/docs/Web/CSS/initial

 .root { color: blue; /* Lots of other styles */ }.special { font-weight: bold; color: initial; }

 <div class="root"> This is blue <div class="special"> <span>This is bold and blue, but I'd like this to be only bold</span> </div> </div>