CSS Reihenfolge & priosierung

[swt2015]

Hallo,

wieso wird im folgenden CSS das display:inline; vor dem display:none; priorisiert? Das erste kommt aus global.css und das zweite aus media_queries.css

Eingebunden in folgender Reihenfolge: <link href="/media_queries.css" rel="stylesheet" type="text/css"> <link href="/global.css" rel="stylesheet" type="text/css">

#header ul.menu li {
    background: rgba(0, 0, 0, 0) url("../../../images/wetten/nav-border.png") no-repeat 
scroll left center;
    display: inline;
    float: left;
    padding: 15px 0;
}
.small_1, .small_2, .small_3, .small_4, .b_big {
    display: none;
}

[MrMurphy1]

Hallo,

mit deinen Quellcodeschnipseln kann so recht niemand etwas anfangen. Ein Link zur Seite wäre besser.

Wahrscheinlich hast du die Spezifität nicht berücksichtigt. Siehe zum Beispiel

http://little-boxes.de/lb1/6.5-spezifitaet-punktesystem-fuer-selektoren.html

Gruss

MrMurphy

[Auge]

Hallo

wieso wird im folgenden CSS das display:inline; vor dem display:none; priorisiert? Das erste kommt aus global.css und das zweite aus media_queries.css

Das liegt an der Spezifität der verwendeten Selektoren.

#header ul.menu li {
    display: inline;
}
.small_1, .small_2, .small_3, .small_4, .b_big {
    display: none;
}

Die Ansprache mit der ID des Vorfahrenelements zuzüglich des Typs und der Klasse des Elternelements sowie des Elementtyps selbst ist wesentlich spezifischer als die Ansprache im zweiten Block nur über die Klasse. Im ersten Block werden die zu stylenden Elemente quasi „genauer“ benannt. Mit #header ul.menu li { display: none; } greift auch deine Ausblendregel.

Tschö, Auge

[quincunx]

Hallo,

wieso wird im folgenden CSS das display:inline; vor dem display:none; priorisiert? Das erste kommt aus global.css und das zweite aus media_queries.css

#header ul.menu li {
    display: inline;
}
.small_1 {
    display: none;
}

siehe Spezifität der Regelsätze

der id-Selector wird höher bewertet als der class-Selektor.

gr qx

[mark]

Hi,

CSS Spezifität ist das Stichwort nach dem du wahrscheinlich suchst.

• Universelle Selektoren
  

• Typselektoren
  

• Klassenselektoren
  

• Attributselektoren
  

• Pseudoklassen
  

• ID-Selektoren
  

• Inlinestile
  

http://wiki.selfhtml.org/wiki/CSS/Kaskade#Spezifit.C3.A4t_der_Regels.C3.A4tze oder http://www.w3.org/TR/selectors/#specificity

#header ul.menu li hat eine Spezifität von 112. .small_1 het eine Spezifität von 10.

Deshalb wird #header ul.menu li bevorzugt.

lg

[swt2015]

Vielen Dank!

[Vollzitat]

[Gunnar Bittersmann]

@@swt2015

wieso wird im folgenden CSS das display:inline; vor dem display:none; priorisiert? Das erste kommt aus global.css und das zweite aus media_queries.css

Beides sind Autoren-Stylesheets. Beide Regeln sind ohne !imporatant, also in der Kaskade gleichwertig. Deshalb entscheidet die Spezifität der Selektoren.

Eingebunden in folgender Reihenfolge:

Wäre die Spezifität der Selektoren gleich, dann wäre die Reihenfolge von Bedeutung.

LLAP 🖖