在等待采用CSS3定位......

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; }

另外：目标选择器用于设置导航块和element targets的样式。

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

CSS：支持目标伪类选择器 - caniuse，w3schools，MDN。

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

CSS / CSS3'target-new'属性等，任何主流浏览器都不支持，2017年8月，但它是W3 spec since 2004 February的一部分。

W3Schools 'modal' construction，使用可能包含WP导航的'：target'伪类。您还可以在target =“_ blank”旁边添加HTML rel="noreferrer and noopener，以改善'新标签'的效果。 CSS暂时不会在标签中打开链接，但this page解释了如何使用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

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

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

此示例使用css定位菜单中的链接，其中id =＆＃34;示例＆＃34;

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

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

该代码假定有5个或更少的元素。这可以通过改变短语＆＃34; i＆lt; 5＆＃34;

Answer 6

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

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

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

修改

我使用此at the end of the makefile生成我网站上的每个网页。