如何在 div 中强制 2 个 href 样式

Question

我不能link 1样式与link 2不同。它总是迫使风格从.about a.无论我是否将其具体设置为另一种样式。

<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; }

我试过这样的事情：

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

Answer 1

您正在寻找:first-of-type伪类：

.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 - <a href="#"> Link 1 </a>
      </li>
      <li>
        Text 2 - <a href="#"> Link 2 </a>
      </li>
    </ul>
  </div>
</div>

请注意，它需要位于父元素<li>上，而不是简单地将其直接添加到.about a。这是因为伪类:first-of-type与同级有关，而不是在.about中检查该类型的任何元素。双 <a>元素是其各自<li>父母中的第一个类型。

希望这有帮助！ :)

Answer 2

根据我对这一行的理解：I can't style link 1 different from link 2，您希望每个链接都有不同的样式。

如果只有两个链接，则可以使用first-child和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>

Answer 3

试试这个：

.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 - <a href="#"> Link 1 </a>
      </li>
      <li>
        Text 2 - <a href="#"> Link 2 </a>
      </li>
    </ul>
  </div>
</div>