CSS2 Attribut-Selektoren mit Regex

Question

CSS-Attribut-Selektoren ermöglichen die Auswahl von Elementen basierend auf Attributwerten.Leider habe ich Sie nicht genutzt, in den Jahren (vor allem, weil Sie nicht unterstützt von allen modernen Browsern).Aber ich erinnere mich deutlich, dass ich in der Lage war, Sie zu benutzen, um zu schmücken alle externen links mit einem Symbol, indem Sie einen code ähnlich dem folgenden:

a[href=http] {
    background: url(external-uri);
    padding-left: 12px;
}

Der obige code funktioniert nicht.Meine Frage ist: Wie funktioniert es? Wie tun ich wählen Sie alle <a> tags deren href Attribut beginnt mit "http"?Die offizielle CSS-spec (oben verlinkten) nicht einmal erwähnen, dass dies möglich ist.Aber ich erinnere mich, dies zu tun.

(Hinweis:Die offensichtliche Lösung wäre die Verwendung von class Attribute für eine Auszeichnung.Ich möchte dies vermeiden, da habe ich wenig Einfluss auf die Art und Weise der HTML-code aufgebaut ist.Alle, die ich Bearbeiten kann, ist der CSS-code.)

Answer 1

Wie für CSS 2.1, siehe http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Zusammenfassung:

    Attribute selectors may match in four ways:

    [att]
    Match when the element sets the "att" attribute, whatever the value of the attribute.
    [att=val]
    Match when the element's "att" attribute value is exactly "val".
    [att~=val]
    Match when the element's "att" attribute value is a space-separated list of
    "words", one of which is exactly "val". If this selector is used, the words in the 
    value must not contain spaces (since they are separated by spaces).
    [att|=val]
    Match when the element's "att" attribute value is a hyphen-separated list of
    "words", beginning with "val". The match always starts at the beginning of the
    attribute value. This is primarily intended to allow language subcode matches
    (e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

CSS3 definiert auch eine Liste von Selektoren, aber die Kompatibilität variiert enorm.

Es gibt auch nifty test suite das zeigt, dass die Selektoren funktionieren in Ihrem browser.

Für Ihr Beispiel,

a[href^=http]
{
    background: url(external-uri);
    padding-left: 12px;
}

sollte den trick tun.Leider, es ist nicht unterstützt durch IE.

Answer 2

Antti Antwort ist ausreichend für die Auswahl der Anker, dessen href beginnen mit http und gibt einen perfekten überblick über die verfügbaren CSS2 regex-esque Attribut-Selektoren, wie so:

Attribute selectors may match in four ways:

[att]
Match when the element sets the "att" attribute, whatever the value of the attribute.
[att=val]
Match when the element's "att" attribute value is exactly "val".
[att~=val]
Match when the element's "att" attribute value is a space-separated list of
"words", one of which is exactly "val". If this selector is used, the words in the 
value must not contain spaces (since they are separated by spaces).
[att|=val]
Match when the element's "att" attribute value is a hyphen-separated list of
"words", beginning with "val". The match always starts at the beginning of the
attribute value. This is primarily intended to allow language subcode matches
(e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

Allerdings ist hier der entsprechende, AKTUALISIERTE Art und Weise zu wählen, das alle ausgehenden links, die mit dem neuen CSS3 :nicht pseudo-class selector ebenso wie das neue *= substring syntax um sicherzustellen, dass es ignoriert alle internen links, die möglicherweise noch beginnen Sie mit http:

a[href^=http]:not([href*="yourdomain.com"])
{
    background: url(external-uri);
    padding-left: 12px;
}

*Beachten Sie, dass diese ist nicht durch IE, bis mindestens IE8.Vielen Dank, IE, du bist die beste :P

Answer 3

Beachten Sie, dass im Antti dem Beispiel würden Sie wahrscheinlich wollen, fügen Sie einen Haken für alle absoluten links können Sie haben Ihre eigene domain, über die Sie wahrscheinlich nicht wollen Flagge als "außen", z.B.:

a[href^="http://your.domain.com"]
{
    background: none;
    padding: 0;
}

Und Sie wollen diese nach die Vorherige Erklärung.

Sie können aber auch die volle Protokoll-Präfix, nur in Fall Sie ein lokales Dokument mit dem Namen "http-info.html" das Sie verknüpfen möchten, z.B.:

a[href^="http://"]
{
    background: url(external-uri);
    padding-left: 12px;
}

Beachten Sie, dass in beiden etwas komplexeren Fällen, sollten Sie zitieren den Wert.Diese Arbeit, die für mich in IE7.