html - 覆盖元素的主要 CSS 而不必重置每个属性

Question

如果选择器在 main.css 中存储了一长串属性，而我希望只使用一个属性并在 custom.css 中覆盖它，我该如何“重置”该元素而不必在 main.css 中列出所有这些属性。 css 并将它们设置为默认值？

我一直有 CSS 干扰的问题，如果不再需要它们，我总是不得不将它们重置为 width:auto 等。

https://jsfiddle.net/ugdh833a/1/

     // Stored in main.css, this stylesheet is not to be edited
     #header {
              height: 100px;
              overflow: auto;
              width: 960px;
              padding: 10px;;
              margin-bottom: 7px;
              padding-bottom: 4px;
              position: relative;
              z-index: 99;
          }

    // Stored in custom.css, this page is used to overide the main css page if required
    // I now wish to just set this selector with just one property, how can I reset this without having all the above at default levels eg. width:auto, padding:0; etc

            #header {
            float:left;
          }

Answer 1

不幸的是，如果您不想更改标记，则必须覆盖 custom.css 中的每个属性，或者您可以添加另一个类并使用 :not() 选择器

新的自定义 header (您需要添加 class="alternative"):

CSS:

#header:not(.alternative){
    height: 100px;
    overflow: auto;
    width: 960px;
    padding: 10px;;
    margin-bottom: 7px;
    padding-bottom: 4px;
    position: relative;
    z-index: 99;
 }


#header.alternative{
    float:left;
}