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

时间:2011-04-10 00:07:06

标签: css hyperlink

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

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

4 个答案:

答案 0 :(得分:54)

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

答案 1 :(得分:10)

可以使用attribute selector

a[rel=external] {

}

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

答案 2 :(得分:2)

使用attribute selector

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

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

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

答案 3 :(得分:0)

可能*

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