Eigenschaft überschreibt andere Eigenschaft... Warum?
1 0 0 
niklaskamenisch
Eigenschaft überschreibt andere Eigenschaft... Warum?
Hallo,
irgendwas habe ich wohl nicht ganz verstanden...
Folgendes kleines HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta content="" name="keywords"/>
<meta content="" name="description"/>
<link rel="stylesheet" href="css/example.css" type="text/css"/>
</head>
<body>
<nav id="mainnav">
<ul id="nav1">
<li class="nav1selected">
<a href="example/index.html">Start</a>
</li>
</ul>
</nav>
</body>
</html>
Dazu dieses CSS:
BODY {
position: absolute;
top: 0px;
left: 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
width: 100%;
background-color: #181815;
}
#mainnav {
position: relative;
top: 0;
left:0;
display: block;
margin: 0;
padding: 0;
}
#nav1 {
width: 100%;
height: 40px;
line-height:40px;
position: relative;
top: 0;
left:0;
background-color: #B2B1DF;
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#nav1 li.nav1selected a:link, a:active, a:visited {
color: #B2B1DF;
}
#nav1 li.nav1selected {
height: 40px;
line-height:40px;
display: inline;
float: left;
padding-left: 10px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
margin: 0px;
white-space: nowrap;
background-color: #393949;
vertical-align: middle;
font-size: 18px;
font-weight: bold;
color: #B2B1DF;
}
/* -------------------------------------------------------------*/
/* Böse Eigenschaft */
/* -------------------------------------------------------------*/
.popnavmain a:active, a:hover, a:visited {
color: #000000;
}
Die Color-Eigenschaft von .popnavmain a:active, a:hover, a:visited überschreibt die Color-Eigenschaft von
#nav1 li.nav1selected a:link, a:active, a:visited
Und wahrscheinlich werden jetzt einige die Hände über dem Kopf zusammenschlagen und sagen: "Ist doch klar!" Aber mir nicht, wie kann ich die a-Eigenschaften besser zuordnen?
Danke und Gruß,
Siri
-
.popnavmain a:active, a:hover, a:visited {
color: #000000;
}[/code]Seh die KOmmas als "oder" :)
.popnavmain a:active (den es übrigens nicht gibt)
oder
a:hover
oder
a:visited
wird weiß.wenn du den jetzt schon besucht hast, wird er weiß.
Cheers,
Baba -
#nav1 {
width: 100%;
height: 40px;
line-height:40px;
position: relative;
top: 0;
left:0;
background-color: #B2B1DF;
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#nav1 li.nav1selected a:link, a:active, a:visited {
color: #B2B1DF;
}/* -------------------------------------------------------------/
/ Böse Eigenschaft /
/ -------------------------------------------------------------*/
.popnavmain a:active, a:hover, a:visited {
color: #000000;
}> > Die Color-Eigenschaft von .popnavmain a:active, a:hover, a:visited überschreibt die Color-Eigenschaft von > #nav1 li.nav1selected a:link, a:active, a:visited > > Und wahrscheinlich werden jetzt einige die Hände über dem Kopf zusammenschlagen und sagen: "Ist doch klar!" Aber mir nicht, wie kann ich die a-Eigenschaften besser zuordnen? Hallo Siri, \*Hände über dem Kopf zusammenschlag\* "ist doch klar" ;-)) Die Pseudoklassen a:link, a:hover, a:visited ... usw, beziehen sich global auf ALLE Links in deinem Dokument. Somit überschreibst du also mit diesem Selektor .popnavmain a:active, a:hover, a:visited { color: #000000; } die hover- und visited-Zustände von allen Links, obwohl du nur den hover -und visited-Zustand der Links in "popnavmain" formatieren willst. Du kannst die Schreibweise nicht derart abkürzen, wie du es getan hast. Schreibe also: .popnavmain a:active, .popnavmain a:hover, .popnavmain a:visited { color: #000000; } LG Netinja-
Hallo Netinja,
.popnavmain a:active,
.popnavmain a:hover,
.popnavmain a:visited {
color: #000000;
}Das war es! Vielen Dank! Mit Firebug hatte ich es nicht gefunden!
Gruß
Siri
-
-
.popnavmain a:active ist genauer als a:active
Umso genauer das Ergebnis zutrifft, umso mehr ist es wert.
(id) steht auch noch mals höher als . (class) und beides ist mehr wert als der html-tag. Noch höher steht dann nur noch inline-style (style="...")
wo z.b. width="xx px" eingeordnet wird weiß ich grade aber erlich gesagt nicht genau.
Die Sache kann bei riesen projekten echt ein Problem werden. Daher addresieren viele auch schon mal ab #content
#content .modul_xyz .bla #mitglieder .mitglied a.webseite img {...}Damit kann man sich meist sicher sein, dass man nicht durch ein a.webseite img aus irgend einem anderen Modul Probleme bekommt. Grade bei großen projekten mit vielen Entwicklern ist das von Vorteil, wenn man nicht für jedes Modul eine eigene css datei hat.