Question

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

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 also defines a list of selectors，但the compatibility varies hugely。

还有a nifty test suite表示哪些选择器可以在您的浏览器中运行。

至于你的例子，

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

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

Answer 2

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

但是，这是使用新CSS3 :not pseudo class selector以及新*= substring syntax选择所有外向链接的相应更新方式，以确保它忽略可能仍以 HTTP ：

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

*请注意，IE不支持此功能，至少IE8。谢谢，IE，你是最好的：P

Answer 3

请注意，在Antti的示例中，您可能希望为您自己的域中的任何绝对链接添加一个catch，您可能不想要标记为“external” ，例如：

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

你希望在之前的宣言之后。

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

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

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

带有Regex的CSS2属性选择器

3 个答案: