Multiple link colors

Test Area.
(All links are dead-ends).

<div class="linkcolor1">
<a href="#">
Link color 1
</a>
</div>

Link color 1

<p class="linkcolor1">
<a href="#">
Link color 1
</a>

<div class="linkcolor2">
<a href="#">
Link color 2
</a>
</div>

Link color 2

<p class="linkcolor2">
<a href="#">
Link color 2
</a>

<div class="linkcolor3">
<a href="#">
Link color 3
</a>
</div>

Link color 3

<p class="linkcolor3">
<a href="#">
Link color 3
</a>

<span class="linkcolor1">
<a href="#">
Link color 1
</a>
</span>

<a href="#">
<span class="linkcolor1 ">
Link color 1
</span>
</a>

<span class="linkcolor2">
<a href="#">
Link color 2
</a>
</span>

<a href="#">
<span class="linkcolor2">
Link color 2
</span>
</a>

<span class="linkcolor3">
<a href="#">
Link color 3
</a>
</span>

<a href="#">
<span class="linkcolor3">
Link color 3
</span>
</a>

The <span> work.

Because I applied the <span> first.
Next, I added the URL for the link.

The <span> doesn't work. And the default link colors will take over.

Because I added the URL for the link first.
Next, I applied the <span>.