CSS alle auswählen, einige, aber nicht alle Elemente auswählen?

Question

Ich baue eine Website, die keinen Randradius auf einem Element haben wird, und anstatt outline: 0; mehrmals in meinem Stylesheet zu verwenden, versuche ich, den * Selektor zu verwenden, um outline: 0; auf alles anzuwenden;

* { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    outline: 0; 
    outline: none; 
    border-radius:0; 
} 

Dieses CSS funktioniert bei einigen Elementen wie Eingabefeldern, aber nicht bei Schaltflächen.

Ich benutze Bootstrap und dann mein eigenes Stylesheet danach. Es gibt keine anderen Instanzen von border-radius in meinem Stylesheet.

Warum gibt es runde Grenzen und Umrisse so?

Answer 1

Dies ist aufgrund specificity. Der * Wähler selbst hat eine Spezifität Score von 0, 0, 0

Buttons mit Schwerpunkt in Bootstrap haben folgenden Selektor:

.btn:focus { ... } 

Diese eine Spezifität Score von 0, 1, 1, dies bedeutet, Die Deklaration überschreibt die * Deklaration, egal wo im Stylesheet sie platziert ist.

Dies ist einer der wenigen Fälle, in denen !important zu Recht verwendet werden konnte; wenn Sie nicht, obwohl das tun wollen, müssen Sie alle Fälle finden, wo sich diese Erklärung Bootstrap nicht außer Kraft setzen und diese Wähler in Ihrem Selektor Sequenz hinzuzufügen:

*, 
.btn:focus { ... } 

Answer 2

Sie !important hinzufügen müssen mit jeder Eigenschaft für die spezifische Sache, die Sie überschreiben müssen. Ich denke, es wird funktionieren ...

Verwenden aktualisierten Code:

* { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    outline: 0; 
    outline: none!important; 
    border-radius:0!important; 
}