Warum precendence nehmen CSS-Regel ist

ich habe 2 Regeln, die ich zu einem HTML-Element gelten, nav und pull-rightWarum precendence nehmen CSS-Regel ist

html

<ul class="top-header__nav nav nav-inline pull-right"> 
       <li><a href="#">Acceussil</a></li> 
       <li><a href="#">Acsssceuil</a></li> 
       <li><a href="#">Accessuil</a></li> 
       <li><a href="#">Accesssuil</a></li> 
       <li><a href="#">Accesssuil</a></li> 
</ul>

css

.nav { 
    margin: 0; 
    padding: 0; 
} 

.pull-right { 
    margin-left: auto; 
}

normal, ul sollte margin bishaben, aber die nav margin:0 haben Vorrang, warum?

- hier ist ein Bild von Chrom developper Werkzeuge:

Quelle

2016-05-15 karim

Im obigen Beispiel würde 'pull-right' sowohl den Default-Rand als auch den' nav'-Rand außer Kraft setzen. Worüber bist du verwirrt? –

genau, aber es ist nicht, top-header__nav haben Rand auf 0 – karim

Nicht wirklich sicher, was du meinst. Wenn Sie von 'nav's margin sprechen, dann gilt' margin: 0; 'von nav nur für' margin-right', 'margin-top' und' margin-bottom', während 'margin-left' wird durch die Eigenschaft 'pull-right' überschrieben. –

Nach dem Screenshot veröffentlicht, die pull-right Klasse ist auf Linie 32 während die nav Klasse ist auf Linie 38 die erklärt warum nav überschreibt pull-right.

Es spielt keine Rolle, wenn Sie die HTML-Codes wie folgt platzieren:

<ul class="top-header__nav nav nav-inline pull-right">

Oder wie folgt aus:

<ul class="top-header__nav pull-right nav nav-inline">

als die nachfolgende Eigenschaft in Ihrem css die vorhergehende Eigenschaft in Ihrem CSS überschreibt (es sei denn, !important Tags werden natürlich verwendet).

Quelle

2016-05-15 20:23:21

Warum precendence nehmen CSS-Regel ist

Antwort

Verwandte Themen