有什么方法可以使用 CSS 禁用链接吗？

我有一个称为current-page的类，希望禁用与该类的链接，以便在单击它们时不执行任何操作。

答案已经在问题的注释中。为了获得更多可见性，我在这里复制此解决方案 ：

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" class="not-active">Link</a>

有关浏览器的支持，请参见https://caniuse.com/#feat=pointer-events 。如果您需要支持 IE，则有一种解决方法。看到这个答案 。

警告：在 CSS 中将pointer-events用于非 SVG 元素是实验性的。该功能曾经是 CSS3 UI 草案规范的一部分，但由于存在许多未解决的问题，因此已推迟到 CSS4。

CSS 只能用于更改某些样式。使用纯 CSS 可能要做的最好的事情就是完全隐藏链接。

您真正需要的是一些 JavaScript。这是使用 jQuery 库执行所需操作的方式。

$('a.current-page').click(function() { return false; });

CSS 无法做到这一点。 CSS 仅用于演示。您的选择是：

• 不要在<a>标记中包含href属性。
• 使用 JavaScript 查找具有class的锚元素，并相应地删除其href或onclick属性。 jQuery 会帮助您解决这一问题（NickF 展示了如何做类似但更好的事情）。

引导程序禁用链接

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap Disabled 按钮，但看起来像链接

<button type="button" class="btn btn-link">Link</button>

您可以将href属性设置为javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

没有 CSS 的唯一方法是在包装 div 上设置 CSS，这会使您成为一个消失的人，而其他人会代替它。

例如：

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

用 CSS 之类的

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

要真正关闭 A，您必须替换其 click 事件或 href，如其他人所述。

PS：只是为了澄清一下，我认为这是一个相当不整洁的解决方案，对于 SEO 来说也不是最好的，但是我相信纯 CSS 最好。

如果您只想在表单上保留 HTML / CSS，则另一个选择是使用按钮。设置样式并设置disabled属性。

例如http://jsfiddle.net/cFTxH/1/

如果只希望它是 CSS，则禁用逻辑应由 CSS 定义。

要在 CSS 定义中移动逻辑，您必须使用属性选择器。这里有些例子 ：

禁用具有确切 href 的链接： =

您可以选择禁用包含特定 href 值的链接，如下所示：

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

禁用包含一条路径的链接： *=

在此，路径中包含/keyword/任何链接都将被禁用

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

禁用以以下开头的链接： ^=

[attribute^=value]运算符的目标是一个以特定值开头的属性。允许您丢弃网站和根路径。

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

您甚至可以使用它来禁用非 https 链接。例如 ：

a:not([href^="https://"]){
  pointer-events: none;
}

禁用以以下结尾的链接： $=

[attribute$=value]运算符的目标是以特定值结尾的属性。丢弃文件扩展名可能很有用。

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

或其他任何属性

CSS 可以定位任何 HTML 属性。可能是rel ， target ， data-custom等...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

组合属性选择器

您可以链接多个规则。假设您要禁用每个外部链接，但不禁用那些指向您的网站的链接：

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

或禁用指向特定网站 pdf 文件的链接：

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

浏览器支持

从 IE7 开始，支持属性选择器。 :not()选择器，从 IE9 开始。

我用了：

.current-page a:hover {
pointer-events: none !important;
}

而且还不够；在某些浏览器中，它仍然显示链接，闪烁。

我必须添加：

.current-page a {
cursor: text !important;
}