在 CSS 中添加 target = “_black”

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

我想在新的选项卡中打开这些链接。我可以在 HTML 中使用 target=_blank实现它

168810 次浏览

很不幸,没有。 在2013年,没有办法做到这一点与纯 CSS。


更新 : 感谢 Showdev链接到过时的 CSS3超连结规范,是的,没有浏览器已经实现了它。所以答案仍然有效。

正如 c69提到的,没有办法用纯 CSS 来完成。

但你可以使用 HTML 代替:

使用

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

在你的 HTML <head>标签,使所有的网页链接的 没有包括 target属性打开在一个新的空白窗口默认情况下。 否则,您可以像下面这样为每个链接设置 target 属性:

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

它就会覆盖

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

标记,如果它是以前定义的。

使用 target="_blank"的另一种方法是:

onclick="this.target='_blank'"

例如:

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

在等待 CSS3定位的同时..。

在等待主流浏览器采用 CSS3定位时,可以在(X) HTML 创建完成后运行以下 sed命令:

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

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

剪辑

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

这实际上是 javascript,但是相关/相关,因为. querySelectorAll 目标是通过 CSS 语法实现的:

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

这个例子使用 css 来定位菜单中 id = “ example”的链接

它创建了一个变量,它是我们想要更改的元素的集合,但是我们仍然需要通过设置新的目标(“ _ space”)来实际更改这些元素:

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 可以通过几种方式“定位”导航。 这将使用属性样式设置内部和外部链接的样式,这可以帮助向访问者发出信号,告诉他们你的链接将做什么。

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

您还可以将传统的内联 HTML 作为目标“ target = _ black”。

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

还有: 目标选择器到样式导航块和 元素目标

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

CSS: 支持目标伪类选择器 -犬科动物W3学校MDN

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

CSS/CSS3‘ 新目标’属性等,不支持任何主要浏览器,2017年8月,虽然它是 W3规格从2004年2月开始的一部分。

W3Schools 的“ mode”结构 ,使用“ : target”伪类,可以包含 WP 导航。还可以在 target = “ _ black”旁边添加 HTML Rel = “ norefrer and noopener,以提高 “新标签”的性能。CSS 暂时不会在选项卡中打开链接,但是 这一页解释了如何使用 jQuery 打开链接(兼容性可能取决于 WP 程序员)。 MDN 在 < a href = “ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS _ Selectors/Use _ the _: target _ false-class _ in _ selector”rel = “ noReferrer”> Use the: target 伪类在选择器中的使用