我如何不在链接中加下元素？

Question

我试图强调除了#myspan元素之外的链接,我不想在任何情况下加下划线.我也想改变#smapan的颜色.规则似乎不适用于它.如果我颠倒了订单而没有强调"a"但强调#myspan它似乎适用规则.我已经看到文本修饰链接和跨度在这个链接无济于事.

    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>