Question

如果一个选择器有一长串存储在main.css中的属性，我希望只使用一个属性并在custom.css中覆盖它，我怎样才能重置＆＃34;该元素无需在main.css中列出所有这些属性并将它们设置为默认值？

我一直遇到CSS干扰的问题，并且总是不得不将它们重置为宽度：auto等等，如果不再需要它们。

     // 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()选择器

新的自定义标头（您需要添加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;
}

Answer 2

您可以使用all:initial;执行此操作，但unicode-bidi和direction除外。请参阅以下详细信息：https://developer.mozilla.org/en/docs/Web/CSS/all

这里有一个片段：

＆＃13;

/*Stored in main.css, this page 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;
  border:1px solid red;/*added to better illustrate all:initial*/
  background:silver;/*added to better illustrate all:initial*/
}


/* Stored in custom.css */
#header {
  all:initial;
  float:left;
}

＆＃13;

<div id="header">
test
</div>

＆＃13;

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

2 个答案: