Question

＆＃13;

a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
}

＆＃13;

<div class="nav">
   <a href="http://examplelink.com">Link 1</a>
   <a href="http://examplelink.com">Link 2</a>
</div>

＆＃13;

我有一个通用的CSS样式，用于超链接：

a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
}

但我不想从下面的代码中为一个特定的超链接（链接2）应用上面的css样式：

<div class="nav">
   <a href="http://examplelink.com">Link 1</a>
   <a href="http://examplelink.com">Link 2</a>
</div>

是否可以通过使用相同的CSS来处理，但是可以通过一些特殊的html属性或CSS hack来控制或者编写另一个类样式？

Answer 1

您有几种选择：

对于那个特定的HTML，你可以使用这样的CSS：

.nav a:last-child {
    // New CSS Here
}

您还可以通过以下方式修改HTML：

<div class="nav">
    <a href="http://examplelink.com">Link 1</a>
    <a href="http://examplelink.com" class="last-button">Link 2</a>
</div>

然后执行此CSS：

.last-button {
    // New CSS Here
}

或者您可以将html更改为：

<div class="nav">
    <a href="http://examplelink.com">Link 1</a>
    <a href="http://examplelink.com" id="my_special_button">Link 2</a>
</div>

然后执行此CSS：

#my_special_button {
    // New CSS Here
}

Answer 2

您可以使用伪css属性last-child，也可以通过多种方式使用:nth-child：看看这个https://jsfiddle.net/ruhul105/r5tev6bv/5/

a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
}
a:last-child {
  color: red;
}
.nav-one a {
  display: block;
}
.nav-one a:nth-child(1){
  color: green;
}
.nav-one a:nth-child(2){
  color: blue;
}
.nav-two {
  margin-top: 20px;
}
.nav-two a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
    display: block;
}
.nav-two a:nth-child(2n){
  color: green;
}

<div class="nav">
   <a href="http://examplelink.com">Link 1</a>
   <a href="http://examplelink.com">Link 2</a>
</div>

<h3>Example with nth-child (target by number)</h3>
<div class="nav-one">
   <a href="http://examplelink.com">Link 1</a>
   <a href="http://examplelink.com">Link 2</a>
   <a href="http://examplelink.com">Link 3</a>
   <a href="http://examplelink.com">Link 4</a>
</div>

<h3>Example with nth-child(target only even)</h3>
<div class="nav-two">
   <a href="http://examplelink.com">Link 1</a>
   <a href="http://examplelink.com">Link 2</a>
   <a href="http://examplelink.com">Link 3</a>
   <a href="http://examplelink.com">Link 4</a>
</div>

Answer 3

您可以向元素添加一个类，然后设置该类的样式：

<div class="nav">
   <a href="http://examplelink.com">Link 1</a>
   <a class="special-link" href="http://examplelink.com">Link 2</a>
</div>

然后在CSS中：

.special-link {
  color: red;
}

或者，如果你想保留当前的html结构：

.nav a:nth-child(2) {
 color: red;
}

第一种方法通常更好，因为即使您在要设置样式的链接之前/之后添加链接也能正常工作，如果您愿意，也可以重新使用该类来实现其他链接。

Answer 4

为<a>标记使用单独的类。试试这个：

a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
}

.mylink {
  color: purple;
}

HTML：

<div class="nav">
   <a href="http://examplelink.com">Link 1</a>
   <a href="http://examplelink.com" class="mylink">Link 2</a>
</div>

Answer 5

我找到了一种非常简单的方法：

style="all:unset;"

我们可以使用它从特定的html标签重置所有类型的style / css。即。

<div class="nav">
   <a href="http://examplelink.com">Link 1</a>
   <a href="http://examplelink.com" style="all:unset;">Link 2</a>
</div>

或者可以为此重置css创建单独的类。像

.reset_particular_tag {
    all:unset;
}

<div class="nav">
   <a href="http://examplelink.com">Link 1</a>
   <a href="http://examplelink.com" class="reset_particular_tag">Link 2</a>
</div>

如何在特定超链接上重置CSS？

5 个答案: