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

Question

除了#myspan元素之外，我试图给链接加下划线，我在任何情况下都不希望给它加下划线。 我还想改变#myspan的颜色。 规则似乎不适用于它。 如果我颠倒顺序，不在“a”下划线，而是在#myspan下划线，这似乎适用规则。 我见过文本装饰的链接和跨度在这个链接没有任何效果。

null

    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>
    

null

Answer 1

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

如果有用就告诉我

Answer 2

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

null

css prettyprint-override">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

使元素成为内联块，它不会受到下划线的影响:

null

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>