如何不在链接中的元素下划线？答案

【问题标题】：How do I not underline an element in a link?如何不在链接中的元素下划线？
【发布时间】：2019-02-22 06:27:46
【问题描述】：

我正在尝试为链接添加下划线，但 #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>

【问题讨论】：

标签： html css

【解决方案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;
}

&lt;a href="#"&gt;A link &lt;span id="myspan"&gt;some additional information&lt;/span&gt;&lt;/a&gt;

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

要删除 text 和 span 之间的小空间，您可以去掉空格并使用小边距：

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

&lt;a href="#"&gt;A link&lt;span id="myspan"&gt;some additional information&lt;/span&gt;&lt;/a&gt;

【讨论】：

【解决方案2】：

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 进行更改。

让我知道它是否有效

【讨论】：