Come impostare gli attributi CSS ai valori predefiniti per un elemento specifico (o impedire l'ereditarietà)

Question

Dato un elemento HTML figlio di un altro elemento e che eredita automaticamente una serie di attributi CSS: come si può impostare uno (o tutti) di quegli attributi al valore predefinito?

Esempio:

CSS:

.navigation input { 
    padding: 0; 
    margin: 0 30em; 
} 

HTML

<div class="navigation"> 
    Some text: <input type="text" name="one" /> 
    More text: <input type="text" name="two" /> 
    <!-- The next input, I want it to be as browser-default --> 
    <div class="child"> 
     <input type="text" name="three"> 
    </div> 
</div> 

Qui, da browser predefinito voglio dire che voglio farlo sembrare esattamente come se non CSS a tutti è stato applicato a quell'elemento

Qui sto usando un elemento input come esempio, ma sto parlando di qualsiasi tipo di elemento. Non sto chiedendo come impostare diversi attributi CSS per quell'elemento specifico, ti sto chiedendo come reimpostare ai valori predefiniti.

Diversi elementi hanno attributi di default diversi come padding quando non sono impostati. Ad esempio, un button con una spaziatura di 0 in CSS avvolgerà il suo testo senza spazio. In seguito puoi impostare il padding su un altro valore, ma come lo imposteresti sul padding predefinito?

Grazie in anticipo per eventuali commenti!

Answer 1

Se si sta parlando dei valori predefiniti del browser rispetto ai fogli di stile di ripristino CSS, si trovano in tutto il Web, quei fogli di stile reimpostano le proprietà di ciascun elemento su un valore standard.

Alcuni esempi

Meyer Web

HTML5 Doctor (reset CSS con HTML5 elementi inclusi)

Se si hanno da dire reset manuale Stile e ignorano l'eredità, che fino ad ora, non c'è modo per resettare gli stili completamente a meno che e fino a quando non si dichiarano nuovamente i loro valori, ad esempio

div { 
    color: red; 
    font-family: Arial; 
} 

div p { 
    /* Here it will inherit the parents child unless and 
     until you re specify properties with different values */ 
} 

Answer 2

Si canno t imposta un attributo sul valore predefinito, poiché i valori predefiniti dipendono dal browser e non possono essere indicati in CSS. Cf. a How to set CSS attributes to default values for a specific element (or prevent inheritance)

D'altra parte, il vostro esempio imposta padding e margin, quali sono non ereditato. Quindi la domanda sembra essere come impedire che la tua regola CSS venga applicata ad un elemento specifico. Quindi la risposta è che è necessario modificare il selettore della regola in modo che l'elemento specifico non lo corrisponda. Nel vostro caso, questo potrebbe essere fatto modificando il selettore

.navigation > input 

Ma più complicato il markup e il foglio di stile sono, tanto più difficile diventa per limitare gli effetti in questo modo.

Answer 3

nel tuo caso è possibile utilizzare tale:

.navigation input {  
    all: initial; 
} 

che consente il ripristino attibutes del vostro input per valore iniziale.

fonte: http://www.w3schools.com/cssref/css3_pr_all.asp

Answer 4

È possibile utilizzare impostata, dicono che si desidera impostare colore del bordo per browser predefinito

.navigation input { 
    padding: 0; 
    margin: 0 30em; 
    border-color: unset; 
} 

questo sarà disinserire lo stile ereditato da altre classi.