在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>

标签,如果它是以前定义的.

太好了!我和OP有同样的问题.在当前选项卡中打开链接的WordPress主题.我编辑了页面HTML并输入了你的代码 - 甚至不知道你可以在WP中以这种方式编辑头部 - 它有效!真棒. (3认同)
有人要求使用 CSS，这不是 CSS！ (2认同)

Answer 2

很不幸的是,不行.在2013年,没有办法用纯CSS做到这一点.

更新:感谢showdev链接到CSS3超链接的过时规范,是的,没有浏览器实现它.所以答案仍然有效.

使用CSS*period*无法做到这一点. (9认同)
不幸？这是一种行为,而不是一种风格. (3认同)
CSS 已添加此行为“target-new:tab;” 不幸的是，所有浏览器都处于睡眠状态并且尚未实现此行为。来源：https://www.w3schools.com/cssref/css3_pr_target-new.asp (3认同)

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:支持目标伪类选择器 - caniuse,w3schools,MDN.

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

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

W3Schools'模态'构造,使用':target'伪类,可以包含WP导航.您还可以在target ="_ blank"旁边添加HTML rel ="noreferrer和noopener "以改善"新标签"的性能.目前CSS不会在标签中打开链接,但是此页面解释了如何使用jQuery执行此操作(兼容性可能取决于WP编码器).在选择器中使用:target伪类时, MDN有一个很好的评论

Answer 4

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

onclick="this.target='_blank'"

例：

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