Basic CSS-Problem, Eigenschaften in mehreren Klassen ändern?

Question

Ich bin ein bisschen ein Neuling mit CSS und hämmere meinen Kopf gegen den Tisch und versuche herauszufinden, was mit meinem Code nicht stimmt. Die HTML:

<div id="loginForm"> 
    <span class="dottedLink"><a href="resetlogin">Recover login details</a></span><br> 
    <span class="dottedLink"><a href="signup">Create an account</a></span> 
</div> 
<div id="mainpageSplashImage"></div><br> 
<div id="titleDesciption">This is the Title</div> 
<div id="registerButtonPlacement"><a href="signup" class="linkButton">Register</a></div> 

Die CSS:

.dottedLink { 
    font-family: sans-serif; 
    font-size: .9em; 
} 
.dottedLink a, a:visited, a:active { 
    color: #0099CC; 
    text-decoration: none; 
    border-bottom: 1px dotted; 
} 
.dottedLink a:hover { 
    text-decoration: none; 
    border: none; 
    color: #990000; 
} 
.linkButton { 
    background: #CC0000; 
    border: 1px solid #888888; 
    padding: 5px; 
    color: #FFF; 
    font-size: 1em; 
    cursor: pointer; 
    font-family: sans-serif; 
    text-align: center; 
    text-decoration: none; 
    border-bottom: none; 
} 
.linkButton a, a:active, a:visited { 
    color: #FFFFFF; 
} 
.linkButton:hover { 
    background: #FFFFFF; 
    border: 1px solid #888888; 
    padding: 5px; 
    color: #CC0000; 
    font-size: 1em; 
    cursor: pointer; 
    text-decoration: none; 
} 

Das Hauptproblem zu sein, ich cannont die 'Farbe' Eigenschaft ändern (und nur die 'Farbe' Eigentum) von 'dottedLink' ohne auch Wechsel die Farbeigenschaft von 'linkButton'. Das heißt, wenn ich die Farbe einer Klasse ändere, ändert sich auch automatisch die Farbe der anderen Klasse. Ich habe das in anderen Browsern getestet, und es scheint nur in Firefox zu passieren und ich weiß nicht warum. Bitte helfen Sie, das ist so frustrierend

Answer 1

Problem: Die Art und Weise Sie denken, es funktioniert ...

Erläuterung: diesen Code in Betracht.

.dottedLink a, a:visited, a:active { 
    color: #0099CC; 
    text-decoration: none; 
    border-bottom: 1px dotted; 
} 

es wählt die a-Tags unter .dottedLink Klasse nach .dottedLink a, es wählt alle a Tags als pro a:visited und a:visited.Und damit zielen Sie nicht nur auf die Tags a unter dem gewünschten Klassenelement ab, sondern auf alle a Tags. So sind die genannten Stile gilt für alle a-Tags auf Ihrer Seite

Fortsetzung der Ausgabe. Sie haben diesen Code

.linkButton a, a:active, a:visited { 
    color: #FFFFFF; 
} 

, die wieder der gleiche Fall ist .. wählt alle a Tags und wendet diesen Stil.

Lösung: ist Ihr Code Refactoring spezifischen a Tags wie

.dottedLink a, .dottedLink a:visited, .dottedLink a:active { 

und

.linkButton a, .linkButton a:active, .linkButton a:visited { 

Denken Sie daran, jeweils , getrennt Wähler wirkt auf seine eigene Ziel und ist nicht verbunden mit seine vorhergehenden Selektoren, wie Sie denken ..

So dieses Beispiel

.linkButton a, a:active, a:visited { 
     color: #FFFFFF; 
    } 

entspricht

.linkButton a { 
    color: #FFFFFF; 
} 
a:active{ 
    color: #FFFFFF; 
} 
.a:visited { 
    color: #FFFFFF; 
} 

Hoffe, dass Sie die Logik erhalten.

Answer 2

verwenden,

.dottedLink a, .dottedLink a:visited, .dottedLink a:active { 
    color: #0099CC; 
    text-decoration: none; 
    border-bottom: 1px dotted; 
} 

statt

.dottedLink a, a:visited, a:active { 
    color: #0099CC; 
    text-decoration: none; 
    border-bottom: 1px dotted; 
} 

das gleiche für .linkButton. Jetzt wirkt sich jede Änderung auf .dottedLink nicht auf .linkButton und umgekehrt aus. Ich hoffe es hilft.

Answer 3

Mit Ihrem HTML so wie es ist und das CSS so wie es ist, Sie sehen wahrscheinlich die :visited Farbe auf Ihrem Link. Selbst wenn Sie die Farbe des <span> ändern würden, hat der Link seine eigene Farbe, die den Bereich überschreiben würde (da es ein Kind des Bereichs ist).

Die Art und Weise, dies zu beheben, besteht darin, die Farbe des Links anstelle des Bereichs anzugeben. Sie können dies tun, indem Sie den CSS-Selektor > verwenden. Auch durch Trennen des spezifischen Elements.

Ihre Linie hier:

.dottedLink a, 
a:visited, 
a:active { 
    color: #0099CC; 
    text-decoration: none; 
    border-bottom: 1px dotted; 
} 

Dies sollte Ihnen sagen, dass, wenn Sie .dottedLink a ändern, sind Sie auch Ändern ANY:

.dottedLink a, a:visited, a:active { 
    color: #0099CC; 
    text-decoration: none; 
    border-bottom: 1px dotted; 
} 

es, indem Sie auf diese Weise mehr Sinn machen könntea:visited und a:active.

Eine bessere Möglichkeit, nur die Farbe .dottedLink a zu ändern, besteht darin, sie aus diesem Block zu entfernen.

.dottedLink a, a:visited, a:active { 
    text-decoration: none; 
    border-bottom: 1px dotted; 
} 
.dottedLink > a { /*This greater-than symbol means 'the direct child of' */ 
    color:#000000; /*Whatever color*/ 
} 
a:visited, a:active { 
    color: #0099CC; 
} 

Jetzt haben Sie die globale punktierte Grenze auf allen a angezeigten Links und Kontrolle sie alle einzelnen Farben zu machen.