Her bir özelliği sıfırlamak zorunda kalmadan bir öğenin ana CSS'sini geçersiz kılma

Question

Seçici, main.css'de depolanan özelliklerin uzun bir listesini içeriyorsa ve yalnızca bir özelliği kullanmak ve custom.css içinde geçersiz kılmak istiyorsanız nasıl "sıfırlayabilirim" Bu özellikleri main.css içindeki tüm özellikleri listelemeye ve bunları varsayılana ayarlamaya gerek kalmadan mı?

Her zaman CSS karışmasıyla ilgili bir sorun yaşadım ve bunları her zaman genişliğe sıfırlamak zorunda kaldım: artık gerekmedikleri takdirde otomatik vb.

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

maalesef

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

işaretlemeyi değiştirmek istemiyordu eğer custom.css özelliklerin her birini geçersiz kılmak gerekir yoksa başka bir sınıf eklemek ve :not() seçici

yeni kullanabilirsiniz özel başlık (eğer class="alternative" eklemeniz gerekir):

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

sen all:initial; ile, bu unicode-bidi ve direction hariç tüm özellikler için olduğunu yapabilir. Bu bilgileri görmek: https://developer.mozilla.org/en/docs/Web/CSS/all

burada pasajı:

/*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; 
 
}

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