Sélecteurs d'attributs CSS2 avec Regex

Question

Sélecteurs d'attributs CSS permettre la sélection d'éléments en fonction des valeurs d'attribut.Malheureusement, je ne les ai pas utilisés depuis des années (principalement parce qu'ils ne sont pas pris en charge par tous les navigateurs modernes).Cependant, je me souviens très bien que j'avais pu les utiliser pour agrémenter tous les liens externes d'une icône, en utilisant un code similaire au suivant :

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

Le code ci-dessus ne fonctionne pas.Ma question est: Comment ça marche? Comment puis-je tout sélectionner <a> balises dont href l'attribut commence par "http"?La spécification CSS officielle (liée ci-dessus) ne mentionne même pas que cela est possible.Mais je me souviens avoir fait ça.

(Note:La solution évidente serait d'utiliser class attributs de distinction.Je veux éviter cela car j'ai peu d'influence sur la façon dont le code HTML est construit.Tout ce que je peux modifier, c'est le code CSS.)

Answer 1

Quant à CSS 2.1, voir http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Résumé exécutif:

    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 définit également une liste de sélecteurs, mais la compatibilité varie énormément.

Il y a aussi une suite de tests astucieuse celui qui montre quels sélecteurs fonctionnent dans votre navigateur.

Quant à votre exemple,

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

devrait faire l'affaire.Malheureusement, il n'est pas pris en charge par IE.

Answer 2

La réponse d'Antti est suffisante pour sélectionner les ancres dont les href commencent par http et donne un aperçu parfait du CSS2 disponible regex-esque sélecteurs d'attributs, comme ceci :

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

Cependant, voici la manière appropriée et MISE À JOUR de sélectionner tous les liens sortants à l'aide du nouveau CSS3 :pas sélecteur de pseudo-classe ainsi que le nouveau *= syntaxe de sous-chaîne pour s'assurer qu'il ne tient pas compte de tous les liens internes qui peuvent encore commencer par http:

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

*Notez que ceci n'est pas pris en charge par IE, jusqu'à au moins IE8.Merci, IE, tu es le meilleur :P

Answer 3

Notez que, dans l'exemple d'Antti, vous souhaiterez probablement ajouter une capture pour tous les liens absolus que vous pourriez avoir vers votre propre domaine, que vous pourriez probablement ne le faites pas souhaitez signaler comme « externe », par exemple :

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

Et tu voudrais ça après la déclaration précédente.

Vous pouvez également inclure le préfixe complet du protocole, juste au cas où vous auriez un document local nommé "http-info.html" vers lequel vous souhaiteriez créer un lien, par exemple :

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

Notez que, dans ces deux cas légèrement plus complexes, vous devez citer la valeur.Ceux-ci fonctionnent, pour moi, dans IE7.