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

【问题标题】：CSS - style a link based on its "rel" attribute?CSS - 根据其“rel”属性设置链接样式？
【发布时间】：2011-08-02 07:15:29
【问题描述】：

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

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

【问题讨论】：

标签： css hyperlink

【解决方案1】：

Felix Kling 和三十多点建议使用 [att=val] 属性选择器 (a[rel="external"])。但是这只有在 external 是 only 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。

【讨论】：

【解决方案2】：

attribute selector 是可能的：

a[rel=external] {

}

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

【讨论】：

它有效：D 我不关心 IE 6，我的网站甚至没有出现在那个浏览器中：x

【解决方案3】：

使用attribute selector：

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

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

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

【讨论】：

【解决方案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/

【讨论】：