完全重置@media屏幕中的css类 [英] Completely reset a css class inside @media screen

问题描述

我有一个主要网站的菜单栏有很多CSS，但对于智能手机用户，我想彻底重新设计菜单栏。我通过使用 @media only screen和（max-width：767px）{} 并更改类的属性，但是一切都是从原始类和手动重置每个类的每个单个属性是一个真正的痛苦。

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.

所以我想知道是否有一个简单的方法来重置CSS在使用 @media only screen and（max-width：767px）{}

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) {}

推荐答案

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

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

strong> - 此关键字指示将应用于元素或元素的父元素的所有属性更改为其父值（如果它们是可继承的）或更改为其初始值（如果不是）。

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不支持

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

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

这篇关于完全重置@media屏幕中的css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！