Question

除了#myspan元素外，我试图在链接上加上下划线，在任何情况下我都不希望下划线。我还想更改#myspan的颜色。该规则似乎不适用于它。如果我颠倒顺序，但未在“ a”下划线，但在#myspan下划线，则似乎适用该规则。我见过Text decoration for link and span inside this link无济于事。

    a {
      text-decoration: underline;
    }
    
    a #myspan {
      color: black;
      text-decoration: none;
    }
    
    a:active #myspan {
      color: grey;
      text-decoration: none;
    }
    
    a:visited #myspan {
      color: yellow;
      text-decoration: none;
    }
    
    a:hover #myspan {
      color: red;
      text-decoration: none;
    }

  <a href="#">A link <span id="myspan">some additional information</span></a>

Answer 1

将元素设置为inline-block，并且不会受到下划线的影响：

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display:inline-block;
}

a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

<a href="#">A link <span id="myspan">some additional information</span></a>

请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级别的后代（例如内联块和内联表）的内容。 ^ref

要删除文本和跨度之间的小空间，您可以去除空格并使用小边距：

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display:inline-block;
  margin-left:4px;
}


a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

<a href="#">A link<span id="myspan">some additional information</span></a>

Answer 2

我做了a:hover #myspan, a:hover

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  text-decoration: none;
}

a:active #myspan {
  color: grey;
  text-decoration: none;
}

a:visited #myspan {
  color: yellow;
  text-decoration: none;
}

a:hover #myspan, a:hover {
  color: red;
  text-decoration: none;
}

<a href="#">A link <span id="myspan">some additional information</span></a>

Answer 3

a {
  text-decoration: none;
}

#span1{
  text-decoration:underline;
}

#myspan {
  color: black;
  text-decoration: none!important;

}

a:active #myspan {
  color: grey;
  text-decoration: none;
}

a:visited #myspan {
  color: yellow;
  text-decoration: none;
}

a:hover #myspan {
  color: red;
  text-decoration: none;
}

对CSS进行上述更改。

<a href="#"><span id="span1">A link </span><span id="myspan">some additional information</span></a>

对HTML进行更改。

让我知道它是否有效

如何不对链接中的元素加下划线？

3 个答案: