在 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