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

Question

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

是否有可能为rel="external"添加CSS规则？

- Alex

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了解规范。

- unor

Answer 2

使用属性选择器是可行的：

a[rel=external] {

}

注意: 这个选择器在IE6中不被支持。

- Felix Kling

---

它能用：D 我不在意IE 6，我的网站在那个浏览器上甚至无法显示:x - Alex

Answer 3

使用属性选择器：attribute selector。

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

适用于所有现代浏览器，包括IE7+。

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

- thirtydot

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");

Links:
http://github.com/qeremy/so
http://css-tricks.com/attribute-selectors/
http://www.vanseodesign.com/css/attribute-selectors/

- Kerem