如何在 div 中强制使用 2 个 a href 样式答案

【问题标题】：How to force 2 a href styles inside a div如何在 div 中强制使用 2 个 a href 样式
【发布时间】：2018-03-17 18:43:03
【问题描述】：

我无法将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>

【问题讨论】：

你能发一个例子说明它不工作吗？
有什么特殊原因不能使用 id 而不是 class 来设置样式吗？
为了清楚起见，您希望每个链接都有不同的样式吗？

标签： html css href

【解决方案1】：

根据我对这一行的理解：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>

【讨论】：

【解决方案2】：

试试这个：

.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>

【讨论】：

【解决方案3】：

您正在寻找 :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> 父元素中的第一个类型。

希望这会有所帮助！ :)

【讨论】：