Farbe des Textes in einem Tag ändern?

Question

.myActive{ 
 
\t background:white; 
 
\t color: red; 
 
} 
 
.navbar > li > a:hover, 
 
.navbar > li > a:focus{ 
 
\t background: ; 
 
\t color: #333; 
 
}

<ul class="navbar"> 
 
\t \t \t \t <li> <a href="index.html">Home</a></li> 
 
\t \t \t \t <li> <a href="#">Categories</a></li> 
 
\t \t \t \t <li> <a href="#">About us</a></li> 
 
\t \t \t \t <li class="myActive"> <a href="#">Contact</a></li> 
 
</ul>

mag ich Farbe meines Textes in <a> Tag ändern, so dass ich eine Klasse schreiben, den Hintergrund von li-Tag ändern, aber es ist nicht meine Farbe Text in li geändert.

Nach ein wenig Forschung verstehe ich, dass ich <span> zu meinem Text hinzufügen muss. aber ich verstehe nicht, warum ich dies tun muss, <a> und <span> sind Inline-Elemente.

.navbar > li > a:hover, 
.navbar > li > a:focus{ 
background: white; 
color: #333; 
} 

und warum Pseudo-Klassenfokus die Arbeit machen?

Answer 1

Wenn Sie Ihre Linkfarbe ändern möchten:

.navbar > li > a{ 
    color: red; 
} 

nicht

.navbar > li{ 
    color: red; 
} 

So CSS für das Link-Element hinzufügen nicht das li. Sie brauchen keine Spanne. Fokus funktioniert, weil Sie CSS für das Verknüpfungselement im Fokusstatus schreiben.

Answer 2

Angenommen, Ihre HTML ist wie dieser

<ul> 
<li><a href="http://www.thesite.net>This Site</a></li> 
</ul> 

Um die Textfarbe des Links zu ändern die CSS einfach

li a{ color: red;} 

Ich würde auch empfehlen eine Hover-Farbe hinzufügen:

li a:hover{color: blue;}