Селектора атрибутов CSS2 с регулярным выражением

Селектора атрибутов CSS позволяют выбирать элементы на основе значений атрибутов. К сожалению, я не использовал их в течение многих лет (главным образом потому, что они не поддерживаются всеми современными браузерами). Тем не менее, я отчетливо помню, что я смог использовать их, чтобы украсить все внешние ссылки с помощью значка, используя код, похожий на следующий:

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

Приведенный выше код не работает. Мой вопрос: Как это работает? Как выбрать все теги <a>, атрибут href начинается с "http"? Официальная спецификация CSS (связанная выше) даже не упоминает, что это возможно. Но я помню, как это делалось.

(Примечание: очевидным решением было бы использовать атрибуты class для различия. Я хочу избежать этого, потому что у меня мало влияния на способ создания HTML-кода. Все, что я могу изменить, это код CSS.)

Ответ 1

Что касается CSS 2.1, см. http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Резюме:

    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 "att" attribute value is exactly "val".
    [att~=val]
    Match when the element "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 "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 также определяет список селекторов, но совместимость сильно варьируется.

Там также отличный набор тестов, который показывает, какие селекторы работают в вашем браузере.

Что касается вашего примера,

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

должен сделать трюк. К сожалению, IE не поддерживается.

Ответ 2

Ответ Antti достаточно для выбора якоря, чей href начинается с http и дает идеальное сокращение доступных селекторов атрибутов регулярных выражений CSS2, например:

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 "att" attribute value is exactly "val".
[att~=val]
Match when the element "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 "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 : not селектор псевдосекументов, а также новый синтаксис подстроки * =, чтобы удостовериться, что он игнорирует любые внутренние ссылки, которые могут начинаться с HTTP

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

* Обратите внимание, что это не поддерживается IE, по крайней мере, до IE8. Спасибо, IE, ты лучший: P

Ответ 3

Обратите внимание, что в примере Antti вы, вероятно, захотите добавить catch для любых абсолютных ссылок, которые могут быть у вас в ваш собственный домен, которые вы, вероятно, не хотите отмечать как "внешние", например:

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

И вы хотите, чтобы это после предыдущее объявление.

Вы также можете включить полный префикс протокола, если у вас есть локальный документ с именем "http-info.html", к которому вы хотите привязать, например:

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

Обратите внимание, что в обоих этих более сложных случаях вы должны указать значение. Эти работы для меня, в IE7.