Html 在 CSS 中添加 target="_blank"
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17281486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add target="_blank" in CSS
提问by Ali
I have external links in top menu of my website. I want to open these links in new tab. I could achieve it using "target=_blank" in HTML. Is there a similar CSS property or anything else?
我的网站顶部菜单中有外部链接。我想在新标签中打开这些链接。我可以在 HTML 中使用“target=_blank”来实现它。是否有类似的 CSS 属性或其他任何东西？
采纳答案by c69
Unfortunately, no. In 2013, there is no way to do it with pure CSS.
抱歉不行。在 2013 年，没有办法用纯 CSS 来做到这一点。
Update: thanks to showdevfor linking to the obsolete spec of CSS3 Hyperlinks, and yes, no browser has implemented it. So the answer still stands valid.
更新：感谢showdev链接到过时的CSS3 Hyperlinks规范，是的，没有浏览器实现它。所以答案仍然有效。
回答by Mojtaba Rezaeian
As c69 mentioned there is no way to do it with pure CSS.
正如 c69 所提到的，纯 CSS 无法做到这一点。
but you can use HTML instead:
但您可以改用 HTML：
use
用
<head>
<base target="_blank">
</head>
in your HTML <head>tag for making all of page links which notinclude targetattribute to be opened in a new blank window by default.
otherwise you can set target attribute for each link like this:
在您的 HTML<head>标签中，用于使所有不包含target属性的页面链接默认在新的空白窗口中打开。否则，您可以为每个链接设置目标属性，如下所示：
<a href="/yourlink.html" target="_blank">test-link</a>
and it will override
它会覆盖
<head>
<base target="_blank">
</head>
tag if it was defined previously.
如果之前定义过标记。
回答by mark stewart
There are a few ways CSS can 'target' navigation. This will style internal and external links using attribute styling, which could help signal visitors to what your links will do.
CSS 可以通过几种方式“定位”导航。这将使用属性样式设置内部和外部链接的样式，这有助于向访问者表明您的链接将执行的操作。
a[href="#"] { color: forestgreen; font-weight: normal; }
a[href="http"] { color: dodgerblue; font-weight: normal; }
You can also target the traditional inline HTML 'target=_blank'.
您还可以定位传统的内联 HTML 'target=_blank'。
a[target=_blank] { font-weight: bold; }
Also :target selector to style navigation block and element targets.
另外：目标选择器来设置导航块和元素目标的样式。
nav { display: none; }
nav:target { display: block; }
CSS :target pseudo-class selector is supported - caniuse, w3schools, MDN.
CSS :target 伪类选择器被支持 - caniuse, w3schools, MDN。
a[href="http"] { target: new; target-name: new; target-new: tab; }
CSS/CSS3 'target-new' property etc, not supported by any major browsers, 2017 August, though it is part of the W3 spec since 2004 February.
CSS/CSS3 ' target-new' 属性等，不受任何主要浏览器支持，2017 年 8 月，尽管它自 2004 年 2 月起成为W3 规范的一部分。
W3Schools 'modal' construction, uses ':target' pseudo-class that could contain WP navigation. You can also add HTML rel="noreferrer and noopenerbeside target="_blank" to improve 'new tab'performance. CSS will not open links in tabs for now, but this pageexplains how to do that with jQuery (compatibility may depend for WP coders). MDN has a good review at Using the :target pseudo-class in selectors
W3Schools 'modal' 构造，使用可包含 WP 导航的 ':target' 伪类。您还可以在 target="_blank" 旁边添加 HTML rel="noreferrer 和 noopener" 以提高“新标签”的性能。CSS 目前不会在标签中打开链接，但此页面解释了如何使用 jQuery 做到这一点（兼容性可能取决于WP coders). MDN 在Using the :target pseudo-class in selectors上有很好的评论
回答by Edison Q
Another way to use target="_blank"is:
另一种使用方法target="_blank"是：
onclick="this.target='_blank'"
Example:
例子：
<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>
回答by Serge Stroobandt
While waiting for the adoption of CSS3 targeting…
在等待采用 CSS3 定位的同时……
While waiting for the adoption of CSS3 targeting by the major browsers, one could run the following sedcommand once the (X)HTML has been created:
在等待主流浏览器采用 CSS3 定位的同时，sed一旦 (X)HTML 创建完成，就可以运行以下命令：
sed -i 's|href="http|target="_blank" href="http|g' index.html
It will add target="_blank"to all external hyperlinks. Variations are also possible.
它将添加target="_blank"到所有外部超链接。变化也是可能的。
EDIT
编辑
I use this at the end of the makefilewhich generates every web page on my site.
我在它的末尾makefile使用它在我的网站上生成每个网页。
回答by John Vandivier
This is actually javascript but related/relevant because .querySelectorAll targets by CSS syntax:
这实际上是 javascript 但相关/相关，因为 .querySelectorAll 以 CSS 语法为目标：
var i_will_target_self = document.querySelectorAll("ul.menu li a#example")
this example uses css to target links in a menu with id = "example"
此示例使用 css 定位菜单中 id = "example" 的链接
that creates a variable which is a collection of the elements we want to change, but we still have actually change them by setting the new target ("_blank"):
它创建了一个变量，它是我们想要更改的元素的集合，但我们仍然通过设置新目标（“_blank”）来实际更改它们：
for (var i = 0; i < 5; i++) {
i_will_target_self[i].target = "_blank";
}
That code assumes that there are 5 or less elements. That can be changed easily by changing the phrase "i < 5."
该代码假设有 5 个或更少的元素。这可以通过更改短语“i < 5”轻松更改。
read more here: http://xahlee.info/js/js_get_elements.html
在此处阅读更多信息：http: //xahlee.info/js/js_get_elements.html
