html - CSS:样式 标签看起来像纯文本

Question

如何设置 anchor 标签的样式使其看起来与纯文本完全一样？例如，我有:

<p> Here is some text and here is a 
   <a class='no-link' href="http://www.example.com" >link</a></p>

到目前为止我尝试过的是:

.no-link{
  pointer-events: none;
  cursor: text;
  text-decoration: none;
  color: black;
} 

但是，使用这种样式，当您将鼠标悬停在“链接”文本上时，“链接”文本仍将显示默认光标(即箭头)，而不是显示在其余文本上的“文本”光标<p>标签。我怎样才能使所有内容都具有文本光标并且仍然具有可点击的链接？

如果可能的话，我想避免使用 jQuery，甚至是 JavaScript。

Answer 1

一种解决方案是将 cursor:text 添加到父 p 元素。 (example)

p {
    cursor:text;
}
.no-link {
    color:inherit;
    text-decoration:none;
    pointer-events:none;
}

---

或者，一个不太理想的解决方案是覆盖一个伪元素，从而阻止它被点击 (example) .该解决方案的缺点是段落中的任何内容都不可点击。因此，如果您想在同一段落元素中使用普通链接，这将不起作用。

p:after {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    cursor:text;
}

作为旁注，我建议使用值 inherit 作为链接的颜色。这样做时，如果父元素的颜色发生变化，它将与父元素的颜色相匹配……比如 this .