Селекторы атрибутов 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

Ответа Антти достаточно для выбора якоря, 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'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.Спасибо, Т.Е. ты самый лучший:P

Answer 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.