是否可以在样式表中修改 "href"？

Question

我想将 href 分配给 CSS。

类似于 <a style="href: url('Home.htm');">Home</a> 而不是 <a href="Home.htm">Home</a>。

是否可以在 CSS 中执行此操作？

我网站的几个地方都有一个按钮，其对应的 URL 值将来可能会改变。我只想在一个地方更改目标地址，即我的 CSS 文件，而不必为该按钮的每个实例手动更改它们。

Answer 1

CSS 是样式 sheet，所以简短的回答是否定的。也不能完全确定您想要这样做的原因是什么，但如果是由于更改数据，请改用 JavaScript 或 PHP 来执行此操作。更容易、合乎逻辑且可能。

Answer 2

href 属性代表超文本引用。它不是适合造型的实体；看到这个 resource。如果您希望为该位置的文本值在页面上的显示方式设置样式，您可以编写为 a 标签设置样式的代码，如果您想要更高级，您可以添加一对 span 标签，如下所示：

CSS:

a {
font: 14px Arial,Helvetica;
color: #00c;
text-decoration:none;
border: 4px dotted #009;
}

a:hover {
  border: 3px solid #009;
}

span {
color: #f0f;
}

<a href='Home.htm'"><span>Home</span></a>

至于更改按钮的值，如果您运行 Linux，它提供了各种有用的实用程序，例如 grep；看到这个 discussion. Also, see this article.

Answer 3

如其他答案中所述，这种行为实际上不受支持。但是如果你真的需要在页面上使用它，可以使用一些 JavaScript 添加它。在CSS中使用定义的自定义variables/properties需要以--开头，我将使用名称--href-override.

我们将监听文档中 link 上的所有 mousedown 和 touchstart 事件。这些事件很有用，因为它们总是会在点击被注册之前发生。每次我们处理其中一个事件时，我们都会检查关联的 link 是否具有 CSS 中定义的 --href-override property/variable。如果是这样，我们将 HTML href 替换为 CSS --href-override 值，浏览器将在处理点击事件时自动使用该新值。

function overrideEventTargetHref(event) {
  // if it's the beginning of a click on a link...
  if (event.target.tagName === 'A') {
    var link = event.target;
    var override = getComputedStyle(link).getPropertyValue('--href-override').trim();

    // if the link has an CSS href-override and it's different than the HTML href...
    if (override && override != link.href) {
      // replace the HTML href with the CSS href-override
      link.href = override;
    }
  }
}

window.addEventListener('mousedown', overrideEventTargetHref, false);
window.addEventListener('touchstart', overrideEventTargetHref, false);

.override {
  --href-override: https://stacksnippets.net/;
}

<a href="https://example.com">actually example.com</a>

<a href="https://example.com" class="override">secretly stacksnippets.net</a>

这也适用于单击鼠标中键以在新选项卡中打开等操作。

这太难了，您通常不想这样做。但如果你的情况需要，你可以。

是否可以在样式表中修改 "href"？

Is it possible to modify "href" in a stylesheet?

html

css

anchor

href