swt2015: CSS Reihenfolge & priosierung

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;
}
  1. 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

  2. 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

    --
    Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
    Terry Pratchett, „Gevatter Tod“
  3. 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

  4. 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

    1. Vielen Dank!

      [Vollzitat]

  5. @@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 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.