SCSS使访问的链接不可点击不起作用[重复]答案

【问题标题】：SCSS making visited link not clickable not working [duplicate]SCSS使访问的链接不可点击不起作用[重复]
【发布时间】：2022-03-12 20:23:59
【问题描述】：

我想要这样一个 a 被访问的元素和类的 myclass 是 lightgreen 并且不可点击。我可以做到lightgreen，但它仍然是可点击的。

我的代码：

a:visited.upvote {
  pointer-events: none;
  cursor: default;
  color: lightgreen;
}

当该代码应用于所有 a 元素时，无论类和访问状态如何 (a {...})，该链接都会被禁用。

【问题讨论】：

你能分享你的html吗？
@DanielA.White 只是<a href="...">link</a>
您的 HTML 表明目标元素没有 upvote 类，因此 CSS 不会应用于它。
@ObsidianAge 哎呀，意思是在问题中表示“赞成”

标签： css hyperlink

【解决方案1】：

pointer-events 属性不能应用于 :visited CSS 伪类，原因是：

隐私限制

由于隐私原因，浏览器严格限制您可以使用此伪类应用的样式，以及它们如何应用使用：

允许的 CSS 属性为 color、background-color、border-color、border-bottom-color、border-left-color、 border-right-color, border-top-color, column-rule-color, outline-color、text-decoration-color 和 text-emphasis-color。

更多信息here。

一种解决方法是向标签添加一个点击事件侦听器，然后向其中添加一个应用 pointer-events: none; 的类，如下所示：

const unclickable = document.getElementById("unclickable")

unclickable.addEventListener("click", makeitso)

function makeitso() {
  unclickable.className = "notSoClickableLink"
}

div{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.notSoClickableLink{
  pointer-events: none;
  color: lightgrey;
}

<div>
  <a href="#">The first Link</a>
  <a id="unclickable" href="#2">Make this a visited Link</a>
</div>

此解决方案不会跟踪您的链接标签的状态，以规避您可以尝试参考此帖子：How can I detect visited and unvisited links on a page?

【讨论】：