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值。

如果你想的风格，可能有1个或多个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/