Warum display: block und display: inline beide existiert in einer CSS-Datei?

Question

.nav ul li a:hover{ 
background:url(../images/left.png) no-repeat left top; 
height:43px; 
display:block; 
padding:0px 13px 0px 13px; 
margin:-3px -25px 0px 0px; 
position:relative; 
float:left; 
display:inline; 
color:#FFF; 
overflow:hidden; 
} 

Diese CSS-Datei verwendet beide Anzeige: Block und Anzeige: Inline; Warum konntest du?

Answer 1

Dies ist ein reines Beispiel für was nicht zu tun mit CSS. Es könnte sein, dass der Autor sich entschieden hat, einen anderen Anzeigemodus zu verwenden und vergessen hat, den vorherigen zu entfernen, oder einfach nur Nachlässigkeit, aber die Mischung aus Schwimmern und Anzeigemodi zeigt auf jemanden, der nicht weiß, was er tut.

Entweder sie lernen CSS oder einfach auf Eigenschaften hinzugefügt, bis es funktioniert, ohne zu verstehen, warum.

Answer 2

Dies ist entweder eine schlechte Praxis oder ein Fehler von einem müden Entwickler und sollte nie wiederholt werden. Es ist jedoch immer noch gültig, auch wenn es unsinnig ist.

Nach this MDN page:

Wenn Spezifität gleich einem der mehreren Deklarationen ist, die letzte Erklärung im CSS gefunden wird an das Element angelegt.

Aus diesem Grunde, der display:block; Teil vollständig ignoriert werden, indem sie durch die später außer Kraft gesetzt wird, erklärt display:inline; und sicher entfernt werden kann.