CSS-Befehle werden nicht übernommen,
da hilft !important

Web-Development
Trackback-Link
Kevin Lieser, am 
31.03.2010

Wenn ihr vor dem Problem steht, dass eure CSS-Befehle nicht mehr greifen. Zum Beispiel wenn ihr ID-Elemente mit Klassen überschreiben möchtet, dann versucht es mal hiermit.

Diesmal gibt es keine Scripte zum Einbinden oder generell großen Erklärungsbedarf. Es geht um eine einfache Regel für CSS (Cascading-Style-Sheets): !important. 

Ich habt vorgefertigte Web-Software wie eCommerce Shops oder einfach Content-Management- und Blog-Systeme? Darin befindet sich schon ein Template, welches ihr noch etwas tunen wollt? 

Dann mal los! Die Hierarchie von CSS: 

1. Element-Style
<div style="...">...

2. ID-Selektoren
<div id="beispiel_id">...

3. Klassen
<div class="beispiel_klasse">...

26px Schrift

Der Text des folgenden Absatzes (<p>) würde laut Hierachie also nun 26 Pixel groß sein, da das ID-Attribut klaren Vorrang gegenüber dem Class-Attribut hat.

HTML
  1. <p id="gross" class="klein">
  2.     Testtext
  3. </p>
CSS
  1. #gross {
  2. font-size:26px;
  3. }
  4.  
  5. .klein {
  6. font-size:10px;
  7. }

Dann versuchen wir es doch einmal mit !important:

CSS
  1. #gross {
  2. font-size:26px;
  3. }
  4.  
  5. .klein {
  6. font-size:10px !important;
  7. }
10px Schrift

Jetzt haben wir der Klasse "klein" gesagt, dass font-size:10px; important, zu Deutsch "wichtig" ist. 

Nach erneutem Blick auf den Absatz, werden wir bemerken, dass die !important-Regel greift. Die Regel wird, soweit meine Erfahrung damit, von jedem Browser berücksichtigt. 

Dann mal wieder viel Vergnügen beim umgestalten eurer Layouts.

 
Trackback-Link
 

Kommentare & Teilen