在CSS中添加target="_blank"

Question

在CSS中添加target="_blank"

htmlcsshyperlink

81

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

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

- Husnain Ali

11

我觉得 CSS 中没有这种结构。链接及其目标是 HTML 标记的结构，或者最多是 JavaScript 代码中的功能。CSS 关注的是视觉样式，而不太关心行为。 - David

这是我正在思考的。但只是想与大家分享，谢谢David。 - Husnain Ali

@David 但我们已经有了像 pointer-events 这样的东西，这离 Mubeen 所问的只有一步之遥 ;) - c69

4

CSS3 定义了超链接的呈现方式。然而，我从未使用过它或研究过它的兼容性。http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#the-target-new - showdev

2

@c69 确实。根据其他答案所述，没有浏览器实现了CSS targets。 - showdev

显示剩余2条评论

6个回答

46

很遗憾，纯CSS无法在2013年实现这个功能。

更新：感谢showdev提供了CSS3超链接的过时规范链接，但是没有浏览器实现它。因此，答案仍然有效。

- c69

10

没有办法用 CSS 完全实现这个。 - cimmanon

3

很遗憾？这是一种行为，不是一种风格。 - Den

4

CSS已经添加了"target-new:tab;"的这种行为，但不幸的是，所有浏览器都还没有实现这种行为。 - Marius

1

@Den - 假设您不确定您是否希望您的网站默认打开新选项卡或相同选项卡中的链接，因此您希望在需要时能够在一个中央位置更改所有锚标记以防稍后改变主意。如果您正在建立公司域的网站（如Blogger），则可能无法访问Mojtaba的“head”解决方案，因此会依赖于CSS样式。很遗憾无法这样做。 - Kyle Delaney

13

有几种方式可以使用CSS "target"导航菜单。这将使用属性样式来修饰内部和外部链接，从而帮助访问者了解您的链接将要做什么。

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

您还可以针对传统的行内 HTML 'target=_blank' 进行目标定位。

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

还可以使用 :target 选择器来为导航块和元素目标设置样式。

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'构造使用了':target'伪类，可以包含WP导航。你也可以添加HTML rel="noreferrer和noopener来优化'新标签页'性能，除了target="_blank"。目前CSS不会打开新标签页，但这个页面解释了如何使用jQuery实现（兼容性可能取决于WP编码人员）。 MDN对在选择器中使用:target伪类进行了良好的评论。

- mark stewart

3

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

onclick="this.target='_blank'"

例子：

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

- Edison Q

19

如果您能够插入这个 onclick 属性，那么您也可以直接把 target='_blank' 放进去，对吧？ - Sergio Tulentsev

谢谢，这帮助我打败了Bootstrap的外部类自动定位_blank。 - Richard Varno

2

实际上这是JavaScript，但与CSS有关/相关，因为.querySelectorAl通过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”，可以轻松更改该数量。

在此阅读更多：http://xahlee.info/js/js_get_elements.html

- John Vandivier

Array.prototype.slice.call(document.querySelectorAll("a.someClass")).forEach(function(a) { a.target = "_blank"; }); - robert4

1

@robert4 最好直接将其传递给 forEach()，而不是在其上使用 slice()。 - alex

1

甚至可以使用以下代码：Array.from(document.querySelectorAll("a.something")).forEach((a) => { a.target = "_blank"; }); - alex

1

在主要浏览器采用CSS3定位之前，可以在创建(X)HTML后运行以下sed命令：

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

它将在所有外部超链接中添加target="_blank"。也可以有不同的变化。编辑我在我的网站上使用这个在makefile的末尾，它会生成每个网页。

- Serge Stroobandt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mojtaba Rezaeian · Accepted Answer

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

但是您可以改用HTML：

使用

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

如果您希望没有设置target属性的页面链接在新的空白窗口中打开，可以在您的HTML <head>标签中添加以下代码：

<base target="_blank">

如果需要单独为某个链接设置target属性，可以按照以下格式设置：

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

并且它将覆盖之前的内容

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

如果之前定义了标签，就使用该标签。