[CSS] !important

White_Angel · 17. November 2010

!important

Hey,

ich hab ne frage und zwar sehe ich sogut wie überall in css codes das "!important"
ich selber hab das nie benutzt, weil ich den sinn dabei nicht so wirklich verstehe,
hab es schon gegooglet, dass es war mit den prioritäten zu tun hat welcher wert mehr gewertet wird,
aber wozu braucht man das wenn man seinen festen wert doch schon eingebeben hat ?

z.B

Code:

#content ul li {
 color : red;
}
ul li {
 color : blue !important;
}

wozu gebe ich dann das "color: red;" an wenns sowieso net angezeigt wird??
Hab denn sinn von !important noch net wirklich verstanden

Anzeige

Murdoc · 17. November 2010

AW: !important

mit !important kannst du höher gewertete regeln überschreiben.
bez. der gewichtung kannst du hier mal schauen: SELFHTML: Stylesheets / CSS-Formate definieren / Kaskade - Anwendung von Stylesheets auf Dokumente

hacker5 · 18. November 2010

AW: !important

Anhand deines geposteten Beispiel kannst du dir das auch so erklären:

HTML:

<style type="text/css">
#content ul li {
 color : red;
}
ul li {
 color: blue; !important
}
</style>

<div id="content">
<ul>
<li>Test</li>
</ul>
</div>

Ergibt ein roten Text mit Test

<ul>
<li>Test</li>
</ul>

Ergibt einen blauen Text mit Test

Edit:// Wobei ich gerade nicht weiß ob ich quatsch erzähle, denn ohne das !important geht es generell ja auch, weil das "red" ja auf "content" bezogen wird.

Murdoc · 19. November 2010

AW: !important

jein. ohne !important wären dann halt alle texte in "ul li" blau, nur in content nicht.

hier ein besseres beispiel:

Code:

li {
 color: blue; /* in allen "li" wären die texte nun blau */
}

ul li {
 color: red; /* überschreibt die obere regel. alle texte sind nun rot */
}

li {
 color: green !important; /* überschreibt beide oberen regeln. alle texte sind nun grün */
}

sowas kann z.b. bei webseiten passieren die mehrere stylesheets einbinden.

zum testen:

HTML:

<!DOCTYPE html>
<html lang="de" dir="ltr">
 <head>
 <title>CSS !important</title>
 <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8" />
 <style type="text/css">
 li {
 color: blue;
 }

 ul li {
 color: red;
 }

 li {
 color: green !important;
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Dieser Text sollte Grün sein.</li>
 </ul>
 </body>
</html>

_zippo^ · 22. November 2010

AW: !important

vielleicht kannst du dir in einer ruhigen abendstunde auch folgendes noch einmal zu gemüte führen:

!important CSS Declarations: How and When to Use Them | Smashing Magazine

Nützliche Suchen

[CSS] !important

Videos zum Themenbereich