CSS - Stil eines Links auf der Grundlage seines "rel"-Attributs?

Question

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

Ist es möglich, css-Regeln für rel="external" hinzuzufügen?

Answer 1

Felix Kling und thirtydot schlugen vor, die [att=val] Attributselektor ( a[rel="external"] ). Aber dies funktioniert nur, wenn external ist die nur rel Wert.

Wenn Sie Links gestalten wollen, die 1 oder mehr haben können rel Werte, sollten Sie die [att~=val] Attributselektor:

a[rel~="external"] (Beachten Sie die Tilde Zeichen)

Ein Beispiel für einen solchen Link könnte sein:

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

---

Siehe http://www.w3.org/TR/css3-selectors/#attribute-representation für die Spezifikation.

Answer 2

Es ist möglich mit dem Attributselektor :

a[rel=external] {

}

Note : Dieser Selektor ist im IE6 nicht unterstützt.

Answer 3

Verwenden Sie die Attributselektor :

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

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

Funktioniert in allen modernen Browsern und IE7+

Answer 4

Möglich mit * .

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