css - 完全重置@media 屏幕内的 css 类

Question

我有一个包含大量 CSS 的主站点菜单栏，但对于智能手机用户，我想完全重新设计菜单栏。我通过使用 @media only screen and (max-width: 767px) {} 并更改那里的类的属性来做到这一点，但是一切都是从原始类继承的，这真的很痛苦手动重置每个类的每个属性。

所以我想知道在使用 @media only screen and (max-width: 767px) {}

时是否有一种简单的方法来重置 CSS 中的类

Answer 1

有一个名为 all 的属性用于重置所有 CSS 属性。

.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...

浏览器支持:Chrome 37+、Firefox 27+、IE 11+、Safari 不支持

阅读更多:https://developer.mozilla.org/en-US/docs/Web/CSS/all