html - 在 CSS 中添加 target="_blank"

Question

我的网站顶部菜单中有外部链接。

我想在新标签中打开这些链接。target=_blank我可以使用HTML来实现它。是否有类似的 CSS 属性或其他任何东西？

score 100 · Accepted Answer

正如 c69 所提到的，纯 CSS 无法做到这一点。

但您可以改用 HTML：

利用

<head>
    <base target="_blank">
</head>

在您的 HTML<head>标记中，用于使所有不包含target属性的页面链接默认在新的空白窗口中打开。否则，您可以像这样为每个链接设置目标属性：

    <a href="/yourlink.html" target="_blank">test-link</a>

它会覆盖

<head>
    <base target="_blank">
</head>

如果之前定义了标签。

score 43 · Accepted Answer

抱歉不行。在 2013 年，纯 CSS 没有办法做到这一点。

更新：感谢showdev链接到CSS3 Hyperlinks的过时规范，是的，没有浏览器实现它。所以答案仍然有效。

score 10 · Accepted Answer

CSS 可以通过多种方式“定位”导航。这将使用属性样式设置内部和外部链接的样式，这可以帮助向访问者表明您的链接将做什么。

a[href="#"] { color: forestgreen; font-weight: normal; }
a[href="http"] { color: dodgerblue; font-weight: normal; }

您还可以定位传统的内联 HTML 'target=_blank'。

a[target=_blank] { font-weight: bold; }

nav { display: none; }
nav:target { display: block; }

支持 CSS :target 伪类选择器 - caniuse、w3schools、MDN。

a[href="http"] { target: new; target-name: new; target-new: tab; }

CSS/CSS3 ' target-new ' 属性等，不受任何主流浏览器支持，2017 年 8 月，尽管自 2004 年 2 月以来它是 W3 规范的一部分。

W3Schools 'modal' 构造，使用可能包含 WP 导航的 ':target' 伪类。您还可以在 target="_blank" 旁边添加 HTML rel="noreferrer 和 noopener以提高“新选项卡”的性能。CSS 暂时不会在选项卡中打开链接，但本页解释了如何使用 jQuery 执行此操作（兼容性可能取决于WP coders ). MDN 在Using the :target pseudo-class in selectors上有很好的评论

score 3 · Accepted Answer

另一种使用方法target="_blank"是：

onclick="this.target='_blank'"

例子：

<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>

score 1 · Accepted Answer

在等待采用 CSS3 定位时……</h1>

在等待主流浏览器采用 CSS3 定位时，可以sed在创建 (X)HTML 后运行以下命令：

sed -i 's|href="http|target="_blank" href="http|g' index.html

它将添加target="_blank"到所有外部超链接。变化也是可能的。

编辑

我在最后使用makefile它来生成我网站上的每个网页。

score 1 · Accepted Answer

这实际上是 javascript，但相关/相关，因为 .querySelectorAll 以 CSS 语法为目标：

var i_will_target_self = document.querySelectorAll("ul.menu li a#example")

此示例使用 css 来定位 id = "example" 的菜单中的链接

它创建了一个变量，它是我们想要更改的元素的集合，但我们实际上仍然通过设置新目标（“_blank”）来更改它们：

for (var i = 0; i < 5; i++) {
i_will_target_self[i].target = "_blank";
}

该代码假定有 5 个或更少的元素。这可以通过更改短语“i < 5”轻松更改。

6 回答 6