27

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

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

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

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

4

3 回答 3

30

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

执行摘要：

    属性选择器可以通过四种方式匹配：

    [阿特]
    当元素设置“att”属性时匹配，无论该属性的值如何。
    [att=val]
    当元素的“att”属性值正好是“val”时匹配。
    [att~=val]
    当元素的“att”属性值为空格分隔的列表时匹配
    “words”，其中之一就是“val”。如果使用此选择器，则
    value 不能包含空格（因为它们是由空格分隔的）。
    [att|=val]
    当元素的“att”属性值是连字符分隔的列表时匹配
    “单词”，以“val”开头。比赛总是从比赛开始
    属性值。这主要是为了允许语言子代码匹配
    （例如，HTML 中的“lang”属性），如 RFC 3066 ([RFC3066]) 中所述。

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

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

至于你的例子，

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

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

于 2008-09-08T09:32:56.373 回答
10

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伪类选择器以及新的*=子字符串语法来选择所有传出链接的适当的更新方法，以确保它忽略任何可能仍以http开头的内部链接：

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

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

于 2013-12-20T23:54:30.633 回答
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 中。

于 2008-09-08T10:59:53.013 回答