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 伪类：

＆＃13;

.about li:first-of-type a {
  color: red;
}

＆＃13;

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

＆＃13;

请注意，它必须位于父<li>元素上，而不是直接将其添加到.about a。这是因为:first-of-type伪类与兄弟姐妹有关，而不是在.about中检查该类型的任何元素。两个 <a>元素都是他们各自<li>父母中的第一个元素。

希望这有帮助！：）

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

Answer 3

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

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

3 个答案: