CSS 带有正则表达式的 CSS2 属性选择器

CSS2 Attribute Selectors with Regex

提问by Konrad Rudolph

CSS Attribute selectorsallow the selection of elements based on attribute values. Unfortunately, I've not used them in years (mainly because they're not supported by all modern browsers). However, I remember distinctly that I was able to use them to adorn all external links with an icon, by using a code similar to the following:

CSS 属性选择器允许根据属性值选择元素。不幸的是，我已经很多年没有使用它们了（主要是因为并非所有现代浏览器都支持它们）。但是，我清楚地记得我能够使用它们来装饰带有图标的所有外部链接，方法是使用类似于以下的代码：

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

The above code doesn't work. My question is: How does it work?How do I select all <a>tags whose hrefattribute starts with "http"? The official CSS spec (linked above) doesn't even mention that this is possible. But I do remember doing this.

上面的代码不起作用。我的问题是：它是如何工作的？如何选择属性以 开头的所有<a>标签？官方 CSS 规范（上面链接）甚至没有提到这是可能的。但我确实记得这样做。href"http"

(Note: The obvious solution would be to use classattributes for distinction. I want to avoid this because I have little influence of the way the HTML code is built. All I can edit is the CSS code.)

（注意：显而易见的解决方案是使用class属性进行区分。我想避免这种情况，因为我对 HTML 代码的构建方式几乎没有影响。我只能编辑 CSS 代码。）

回答by Antti Kissaniemi

As for CSS 2.1, see http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

至于 CSS 2.1，请参阅http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

Executive summary:

执行摘要：

    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 also defines a list of selectors, but the compatibility varies hugely.

CSS3 还定义了一个选择器列表，但兼容性差异很大。

There's also a nifty test suitethat that shows which selectors work in your browser.

还有一个漂亮的测试套件，可以显示哪些选择器在您的浏览器中工作。

As for your example,

至于你的例子，

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

should do the trick. Unfortunately, it is not supported by IE.

应该做的伎俩。不幸的是，它不受 IE 支持。

回答by dcarps14

Antti's answer is sufficient for selecting anchor's whose href's begin with httpand gives a perfect rundown on the available CSS2 regex-esqueattribute selectors, like so:

Antti 的答案足以选择其 href 以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]).

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

However, here is the appropriate, UPDATED way to select all outgoing links using the new CSS3 :notpseudo class selectoras well as the new *=substring syntaxto make sure it disregards any internal links that may still begin with http:

但是，这是使用新的CSS3 :not伪类选择器以及新的*=子字符串语法来选择所有传出链接的适当的更新方法，以确保它忽略任何可能仍以http开头的内部链接：

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

*Note that this is unsupported by IE, up to at least IE8. Thanks, IE, you're the best :P

*请注意，这不受 IE 支持，至少到 IE8。谢谢，IE，你是最好的：P

回答by Bobby Hyman

Note that, in Antti's example you'd probably want to add a catch for any absolute links you may have to your own domain, which you probably don'twant to flag as 'external', e.g.:

需要注意的是，在安蒂的例子你可能要添加一个catch你可能需要自己的域名，你可能任何绝对的联系，不希望标志作为“外部”，例如：

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

And you'd want this afterthe previous declaration.

你会在之前的声明之后想要这个。

You might also want to include the full protocol prefix, just in case you have a local document named "http-info.html" that you wish to link to, e.g.:

您可能还想包含完整的协议前缀，以防万一您希望链接到名为“http-info.html”的本地文档，例如：

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

Note that, in both these slightly-more complex cases, you should quote the value. These work, for me, in IE7.

请注意，在这两种稍微复杂的情况下，您应该引用该值。这些工作，对我来说，在 IE7 中。