How to force 2 a href styles inside a div - html

Question

I can't style link 1 different from link 2. It's always forcing the style from .about a. No matter if I specific set it to another style.
<div class="about">
<div class="wrapper" style="width: 1052px;">
<h2 style="color: #fff">Title</h2>
<ul>
<li>
Text 1 - Link 1
</li>
<li>
Text 2 - Link 2
</li>
</ul></div></div>
CSS:
.about a {
margin-top: 35px;
display: block;
color: #fff;
font: 15px/52px 'sans-serif';
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
width: 226px;
height: 52px;
border: 1px solid #fff;
border-radius: 27px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
I've tried something like this:
Link
<span class="linkk" a href:#">Link</span>
Link

Answer 1

You're looking for the :first-of-type pseudo-class:
.about li:first-of-type a {
color: red;
}
<div class="about">
<div class="wrapper" style="width: 1052px;">
<h2 style="color: #fff">Title</h2>
<ul>
<li>
Text 1 - Link 1
</li>
<li>
Text 2 - Link 2
</li>
</ul>
</div>
</div>
Note that it needs to be on the parent <li> element, rather than simply adding it to .about a directly. This is because the :first-of-type pseudo-class pertains to siblings, rather than checking for any elements of that type in .about. Both <a> elements are the first of their type in their respective <li> parents.
Hope this helps! :)

Answer 2

From what I understood of this line: I can't style link 1 different from link 2, you want different style for each link.
If it is only two links, you can use first-child and last-child
.about li:first-child a {
color: red;
}
.about li:last-child a {
color: blue;
}
<div class="about">
<div class="wrapper" style="width: 1052px;">
<h2 style="color: #fff">Title</h2>
<ul>
<li>
Text 1 - Link 1
</li>
<li>
Text 2 - Link 2
</li>
</ul>
</div>
</div>

Answer 3

Try This:
.about li:nth-of-type(1) a {
color: red;
}
.about li:nth-of-type(2) a {
color: green;
}
.about li:nth-of-type(1) a {
color: red;
}
.about li:nth-of-type(2) a {
color: green;
}
<div class="about">
<div class="wrapper" style="width: 1052">
<h2 style="color:#fff">Title</h2>
<ul>
<li>
Text 1 - Link 1
</li>
<li>
Text 2 - Link 2
</li>
</ul>
</div>
</div>