CSS - 根据链接的“rel”设置链接样式属性？

Question

<a href="http://google.com" rel="external"> LINK </a>

是否可以为 rel="external" 添加 css 规则？

Answer 1

可以使用属性选择器：

a[rel=external] {

}

注意：这是选择器IE6 不支持。

Answer 2

使用属性选择器：

a[rel="external"] {
    color: red
}

http://jsfiddle.net/thirtydot/yUmJk/

适用于所有现代浏览器和 IE7+

Answer 3

可以使用*。

// i.e: <a rel="nofollow external foo">
a[rel*="external"] { color:red; }

// you can add target attribute to open them in a new window
so.dom("a[rel*='external']").setAttr("target", "_blank");

链接：
http://github.com/qeremy/so
http://css-tricks.com/attribute-selectors/
http://www.vanseodesign.com/css/attribute-selectors/

Answer 4

Felix Kling 和三十点建议使用 [att=val] 属性选择器 (a[rel="external"])。 但是仅当 external 是唯一 rel 值时，此方法才有效。

如果您想要设置可能具有 1 个或多个 rel 值的链接样式，则应使用 [att~=val] 属性选择器：

a[rel~= "external"] （注意 波形符 字符）

此类链接的示例如下：

<a href="http://google.com" rel="external nofollow">LINK</a>

---

参见 http://www.w3.org/TR/css3-selectors/#attribute-representation规格。