如何为target="_blank"的锚点添加样式？

Question

我一直在寻找一种方法来更改整个网站上带有target:_blank的链接的css样式。请注意，我只能在css中进行更改，不能使用js。谢谢。

示例：

<style>
a{ color : blue }
a:[target=_blank]{ color : green}
</style>

<a href="someplace.html">link1</a>
<a href="someplace.html" target="_blank">link2</a>

将会是蓝色的，而将会是绿色的。

- Sari Rahal

---

您忘记了引号：[target="_blank"] - Bluety

是的，你可以做到。https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors - Huangism

@Bluety，多余的 : 导致它无法工作。 - Huangism

[target="blank"] 这部分是一个属性选择器，而不是伪选择器，所以不需要冒号。 - Dan Blows

@Huangism 哦，是的，我没看到。 - Bluety

Answer 1

试试fiddle

a[target=_blank]{ color : green}

a{ color : blue }
a[target=_blank]{ color : green}

<a href="someplace.html">link1</a>
<a href="someplace.html" target="_blank">link2</a>

- Akshay

Answer 2

CSS3 提供了基于属性的类别，您可以使用它们来进行定位。在您的情况下，如果您想匹配完全相同的字符串，请使用：

a[target="_blank"] {
  // styles here
  background: red;
}

一些类似的变体：

a[href^="http:"] {
     // targets only links starting with http
}

img[src$=".png"] {
     // matches all images png images alone
}

a[href*="home"] {
       // matches all links which contains home in the link
}

- mohamedrias