在 CSS 中添加 target="_blank"

Question

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

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

Answer 1

正如 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>

如果之前定义过标记。

Answer 2

不幸的是，没有。 在 2013 年，没有办法用纯 CSS 来做到这一点。

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

Answer 3

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上有很好的评论

Answer 4

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

onclick="this.target='_blank'"

例子：

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

Answer 5

在等待采用 CSS3 定位的同时……

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

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

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

编辑

我在生成我网站上每个网页的makefile的末尾使用它。

Answer 6

这实际上是 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”轻松更改。

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

在 CSS 中添加 target="_blank"

问题描述

6 个解决方案

解决方案1
93 2014-01-11 18:16:00

解决方案2
42 已采纳 2013-06-24 17:35:08

解决方案3
11 2017-04-23 02:38:15

解决方案4
3 2014-05-22 05:50:55

解决方案5
1 2014-06-11 11:17:34

在等待采用 CSS3 定位的同时……

解决方案6
1 2014-08-21 16:43:44

在 CSS 中添加 target=&quot;_blank&quot;

问题描述

6 个解决方案

解决方案1 93 2014-01-11 18:16:00

解决方案2 42 已采纳 2013-06-24 17:35:08

解决方案3 11 2017-04-23 02:38:15

解决方案4 3 2014-05-22 05:50:55

解决方案5 1 2014-06-11 11:17:34

在等待采用 CSS3 定位的同时……

解决方案6 1 2014-08-21 16:43:44

在 CSS 中添加 target="_blank"

解决方案1
93 2014-01-11 18:16:00

解决方案2
42 已采纳 2013-06-24 17:35:08

解决方案3
11 2017-04-23 02:38:15

解决方案4
3 2014-05-22 05:50:55

解决方案5
1 2014-06-11 11:17:34

解决方案6
1 2014-08-21 16:43:44