Selettori di attributi CSS2 con Regex

Question

Selettori di attributi CSS consentire la selezione di elementi in base ai valori degli attributi.Sfortunatamente non li uso da anni (principalmente perché non sono supportati da tutti i browser moderni).Ricordo però distintamente che potevo utilizzarli per abbellire tutti i link esterni con un'icona, utilizzando un codice simile al seguente:

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

Il codice sopra non funziona.La mia domanda è: Come funziona? Come seleziono tutto <a> tag di cui href l'attributo inizia con "http"?Le specifiche CSS ufficiali (link sopra) non menzionano nemmeno che ciò sia possibile.Ma ricordo di averlo fatto.

(Nota:La soluzione ovvia sarebbe usare class attributi per la distinzione.Voglio evitarlo perché ho poca influenza sul modo in cui è costruito il codice HTML.Tutto quello che posso modificare è il codice CSS.)

Answer 1

Per quanto riguarda CSS 2.1, vedere http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Sintesi:

    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]).

I CSS3 definiscono anche un elenco di selettori, Ma la compatibilità varia enormemente.

C'è anche un'elegante suite di test quello che mostra quali selettori funzionano nel tuo browser.

Per quanto riguarda il tuo esempio,

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

dovrebbe fare il trucco.Sfortunatamente non è supportato da IE.

Answer 2

La risposta di Antti è sufficiente per selezionare gli ancoraggi i cui href iniziano con http e fornisce una panoramica perfetta dei CSS2 disponibili regex selettori di attributi, in questo modo:

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]).

Tuttavia, ecco il modo appropriato e AGGIORNATO per selezionare tutti i collegamenti in uscita utilizzando il nuovo CSS3 :non selettore di pseudoclasse così come il nuovo *= sintassi della sottostringa per assicurarsi che ignori eventuali collegamenti interni che potrebbero ancora iniziare http:

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

*Nota che questo non è supportato da IE, almeno fino a IE8.Grazie, IE, sei il migliore :P

Answer 3

Tieni presente che, nell'esempio di Antti, probabilmente vorrai aggiungere un trucco per eventuali collegamenti assoluti che potresti avere al tuo dominio, cosa che probabilmente non si desidera contrassegnare come "esterno", ad esempio:

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

E tu vorresti questo Dopo la dichiarazione precedente.

Potresti anche voler includere il prefisso completo del protocollo, nel caso in cui tu abbia un documento locale denominato "http-info.html" a cui desideri collegarti, ad esempio:

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

Nota che, in entrambi questi casi leggermente più complessi, dovresti citare il valore.Questi funzionano, per me, in IE7.