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

Question

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

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

Answer 1

Felix Kling和thirtydot建议使用[att=val]属性选择器（a[rel="external"]）。 但仅当external是 rel值时才会有效。

如果要为可能包含一个或多个rel值的链接设置样式，则应使用[att~=val]属性选择器：

a[rel~="external"]（请注意tilde字符）

这种链接的一个例子可能是：

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

---

有关规范，请参阅http://www.w3.org/TR/css3-selectors/#attribute-representation。

Answer 2

可以使用attribute selector：

a[rel=external] {

}

注意：这是选择器not supported in IE6.

Answer 3

使用attribute selector：

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

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

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

Answer 4

可能*。

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