Селекторы атрибутов CSS2 с помощью регулярных выражений

Question

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

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

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

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

Answer 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'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 также определяет список селекторов , но совместимость сильно различается .

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

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

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

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

Answer 2

Ответ Антти достаточен для выбора якорей, чьи ссылки начинаются с http , и дает идеальное краткое изложение доступных селекторов атрибутов CSS2 regex-esque , например:

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 : не селектор псевдокласса , а также новый * = синтаксис подстроки , чтобы убедиться, что он игнорирует любые внутренние ссылки, которые все еще могут начинаться с http :

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

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

Answer 3

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

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

И вам нужно это после предыдущего объявления.

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

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

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