Wie können Links in einer Seite unterschiedliche Schriftfarben erhalten?

Die Ausgangssituation: Der Autor einer Website wünscht sich, innerhalb des Dokuments die Hyperlinks mit unterschiedlichen Schriftfarben auszustatten.

Möglichkeit Nr.1:

Der Einsatz von CSS-Klassen, um für die einzelnen Linkgruppen eine Fallunterscheidung bezüglich ihrer Textfarbe vornehmen zu können.

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="wrapper">
     <ul>
         <li><a href="#" [B]class="style1"[/B]>link_style1</a></li>
         <li><a href="#" [B]class="style1"[/B]>link_style1</a></li>
     </ul>
     <ul>
         <li><a href="#" [B]class="style2"[/B]>link_style2</a></li>
         <li><a href="#" [B]class="style2"[/B]>link_style2</a></li>
     </ul>
     <ul>
         <li><a href="#" [B]class="style3"[/B]>link_style3</a></li>
         <li><a href="#" [B]class="style3"[/B]>link_style3</a></li>
     </ul>
</div>
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

a[B].style1[/B]:link, a[B].style1[/B]:visited {
color:#cfcfcf;
}
a[B].style1[/B]:hover, a[B].style1[/B]:active {
color:#00c0ff;
}
 
a[B].style2[/B]:link, a[B].style2[/B]:visited {
color:#00c0ff;
}
a[B].style2[/B]:hover, a[B].style2[/B]:active {
color:#cfcfcf;
}
 
a[B].style3[/B]:link, a[B].style3[/B]:visited {
color:#cfcfcf;
}
a[B].style3[/B]:hover, a[B].style3[/B]:active {
color:#ff9f00;
}
Möglichkeit Nr.2:

Die Seitenbereiche, in denen die Links eingebettet sind, mit einem ID- oder Klassen-Bezeichner auszeichnen, und die Formatierung mit dem Selektor für Nachfahren durchführen.

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="wrapper">
     <ul [B]id="style1"[/B]>
         <li><a href="#">link_style1</a></li>
         <li><a href="#">link_style1</a></li>
     </ul>
     <ul [B]id="style2"[/B]>
         <li><a href="#">link_style2</a></li>
         <li><a href="#">link_style2</a></li>
     </ul>
     <ul [B]id="style3"[/B]>
         <li><a href="#">link_style3</a></li>
         <li><a href="#">link_style3</a></li>
     </ul>
</div>
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

ul[B]#style1[/B] a:link, ul[B]#style1[/B] a:visited {
color:#cfcfcf;
}
ul[B]#style1[/B] a:hover, ul[B]#style1[/B] a:active {
color:#00c0ff;
}
 
ul[B]#style2[/B] a:link, ul[B]#style2[/B] a:visited {
color:#00c0ff;
}
ul[B]#style2[/B] a:hover, ul[B]#style2[/B] a:active {
color:#cfcfcf;
}
 
ul[B]#style3[/B] a:link, ul[B]#style3[/B] a:visited {
color:#cfcfcf;
}
ul[B]#style3[/B] a:hover, ul[B]#style3[/B] a:active {
color:#ff9f00;
}


mfg Maik