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/