Completely reset a css class inside @media screen

问题

I have a menu bar for the main site which has a lot of CSS, but for smartphone users I want to completely redesign the menu bar. I am doing this by using @media only screen and (max-width: 767px) {} and changing the properties of the classes there, however everything is being inherited from the original class and it's a real pain to reset every single property on every class manually.

So I was wondering if there is an easy way to reset a class in CSS when using @media only screen and (max-width: 767px) {}

回答1:

There is a property called all for resetting all CSS properties.

.classname {
    all: initial; /* or unset */
}

initial - This keyword indicates to change all the properties applying to the element or the element's parent to their initial value...

unset - This keyword indicates to change all the properties applying to the element or the element's parent to their parent value if they are inheritable or to their initial value if not...

Browser support: Chrome 37+, Firefox 27+, IE 11+, Safari Not supported

Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/all

来源：https://stackoverflow.com/questions/30495793/completely-reset-a-css-class-inside-media-screen