How to force 2 a href styles inside a div

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 - <a href="#"> Link 1 </a>

            </li>
            <li>
                Text 2 - <a href="#"> Link 2 </a>

            </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:

<a href="#" class="linkk">Link</a>

<span class="linkk" a href:#">Link</span>

<a href="#" class="linkk">Link</a>

Answer 1

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 - <a href="#"> Link 1 </a>

      </li>
      <li>
        Text 2 - <a href="#"> Link 2 </a>

      </li>
    </ul>
  </div>
</div>