jana: überschreiben von Styleangaben

Hallo Forum,

mit

tr.klasse td button {background-color:pink}
   button.brot {background-color:yellow}

und
  <tr class="klasse">
  <td>normal</td>
  <td><button class="brot">button</button></td>
  </tr>
  </table>
hätt ich gedacht, müsste der Buttonhintergrund gelb werden. Wenn ich das tr.klasse td button wegnehme, ist er es auch.

Warum überschreibt die erste Angabe die zweite? Ich dachte, es wäre umgekehrt?

gruß, Jana

  1. Hi,

    tr.klasse td button {background-color:pink}
       button.brot {background-color:yellow}

    [...]

    hätt ich gedacht, müsste der Buttonhintergrund gelb werden.

    der erste Selektor ist weitaus spezifischer. Er hat eine Spezifität von 013, der zweite nur von 011.

    Warum überschreibt die erste Angabe die zweite? Ich dachte, es wäre umgekehrt?

    Da wird nichts überschrieben. Bei _gleicher_ Spezifität gilt die letzte Angabe, nicht bei unterschiedlicher.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hello out there!

      der erste Selektor ist weitaus spezifischer. Er hat eine Spezifität von 013, der zweite nur von 011.

      Zum Nachlesen, aus welchem Hut Cheatah die Zahlen zaubert:

      • <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität - Gewichtung der Selektoren> [SELFHTML]
      6.4.3 Berechnung der Spezifität eines Selektors [CSS2]
      6.4.3 Calculating a selector's specificity [CSS21]

      See ya up the road,
      Gunnar

      --
      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)