CSS2 Selectores de Atributo con Regex

Question

Atributo CSS selectores permite la selección de elementos con base en los valores de atributo.Por desgracia, no he usado en años (principalmente porque no está soportado por todos los navegadores modernos).Sin embargo, recuerdo claramente que yo era capaz de usarlos para adornar todos los enlaces externos con un icono, mediante el uso de un código similar al siguiente:

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

El código anterior no funciona.Mi pregunta es: ¿Cómo funciona? ¿Cómo puedo seleccionar todos los <a> etiquetas cuya href atributo comienza con "http"?El oficial de CSS spec (enlazado más arriba) ni siquiera mencionar que esto es posible.Pero sí recuerdo que haciendo esto.

(Nota:La solución obvia sería el uso de class atributos de la distinción.Quiero evitar esto porque tengo poca influencia de la forma en que el código HTML es construido.Todo lo que puedo editar el código CSS.)

Answer 1

Como para CSS 2.1, ver http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Resumen ejecutivo:

    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 también define una lista de selectores, pero la compatibilidad varía enormemente.

También hay una elegante suite de prueba que muestra que los selectores de trabajo en su navegador.

En cuanto a tu ejemplo,

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

debe hacer el truco.Por desgracia, no es compatible con IE.

Answer 2

Antti la respuesta es suficiente para la selección del anclaje cuya href comenzar con http y da un perfecto resumen de la información disponible CSS2 regex-esque los selectores de atributo, así:

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

Sin embargo, aquí es la adecuada, ACTUALIZADA, para seleccionar todos los enlaces de salida utilizando la nueva CSS3 :no pseudo selector de clase así como el nuevo *= subcadena sintaxis para asegurarse de que se descarta cualquier de los enlaces internos que todavía puede comenzar con http:

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

*Tenga en cuenta que este no es compatible con IE, al menos, el IE8.Gracias, es decir, eres el mejor :P

Answer 3

Tenga en cuenta que, en Antti el ejemplo quizás quieras agregar una captura para cualquier absoluta enlaces que usted puede tener su propio dominio, que probablemente no desea marcar como "externos", por ejemplo:

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

Y que te gustaría este después de la declaración anterior.

También puede ser que desee incluyen el prefijo de protocolo, en caso de tener un documento denominado "http-info.html" que quieres enlazar, por ejemplo:

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

Tenga en cuenta que, en estos dos ligeramente más complejo de los casos, se debe citar el valor.Estos trabajos, para mí, en IE7.