我以前使用过 CSS，我遇到了下面的 CSS 样式，不知道它是做什么用的。
a[href^="http:"] {
background: url(img/keys.gif) no-repeat right top;
}
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
background-image: none; padding-right:0;
}
【问题讨论】：
标签： css css-selectors
a[href^="http:"]
选择一个<a> 元素，其href 属性值以http: 开头。
例如：
p[title^="para"] {background: green;}
将匹配以下内容：
<p title="paragraph"> This paragraph should have a green background. </p>
【讨论】：
这是 CSS3 中可用的 substring-matching attribute selectors 之一。它匹配具有href 属性的链接，其值以给定的字符串开头。
为了说明，我们将采用您的示例 CSS，并添加一些默认值：
a {
background: none; padding: 0 1em;
}
a[href^="http:"] {
background: url(img/keys.gif) no-repeat right top;
}
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
background-image: none; padding-right:0;
}
并用它来设置以下 HTML 的样式。输出样式汇总在 cmets 中：
<ul>
<!-- [1] No background, 1em left and right padding -->
<li><a href="/index.php">My site's page</a></li>
<!-- [2] Background, 1em left and right padding -->
<li><a href="http://example.com">External link</a></li>
<!-- [3] No background, no right padding -->
<li><a href="http://mysite.com">My site's base URL without www</a></li>
<!-- [4] No background, no right padding -->
<li><a href="http://www.mysite.com">My site's base URL with www</a></li>
<!-- [5] No background, no right padding -->
<li><a href="http://mysite.com/page.php">A page in my site with base URL</a></li>
</ul>
发生了什么事？
仅由a 选择
此元素的 href="/index.php" 属性不以 http: 或其他值开头。
没有背景，但有左右内边距。
仅由a[href^="http:"] 选择
此元素的href="http://example.com" 属性以http: 开头，但不以http://mysite.com 开头。
有左右内边距和背景图片。
由a[href^="http:"]和a[href^="http://mysite.com"]选择
此元素的href="http://mysite.com" 属性以http: 开头，然后以http://mysite.com 开头。
由于第二个选择器覆盖了第一个选择器，因此背景图像和右侧填充被移除。
由a[href^="http:"]和a[href^="http://www.mysite.com"]选择
此元素的href="http://www.mysite.com" 属性以http: 开头，然后以http://www.mysite.com 开头（注意www）。
由于第二个选择器覆盖了第一个选择器，因此背景图像和右侧填充被移除。
由a[href^="http:"]和a[href^="http://mysite.com"]选择
此元素的href="http://mysite.com/page.php" 属性以http: 开头，进一步以http://mysite.com 开头。
请注意，与第三个链接相比，此链接中的属性包含的不仅仅是基本 URL；但是，^= 表示该属性的值只需要以您网站的基本 URL 开头，而不是 =，这意味着“选择仅指向 http://mysite.com 的链接”。因此，此链接由第二个选择器匹配。
由于第二个选择器覆盖了第一个选择器，因此背景图像和右侧填充被移除。
【讨论】：
这些是attribute-starts-with selectors，他们将选择<a> 元素，其href 属性以该值开头，例如a[href^="http:"] 匹配任何以href 开头的锚点，以href="http:...." 开头，例如：
<a href="http://www.google.com">Test</a> <!-- would match -->
<a href="#element">Test</a> <!-- wouldn't match -->
【讨论】：
www.，那么它将是红色的，它必须以 exactly 相同的字符串开头。在此处测试：jsfiddle.net/nick_craver/7hnAB（确保您使用的是支持选择器的较新浏览器）。
<a href="google.com/somethind" ...时才会匹配。选择器不检查语义，它只是比较属性内部的内容，如果值以与选择器中相同的文本开头，则匹配。
这是一个属性选择器。
^= 部分意味着在您的第一个示例中，锚标记的 href 属性必须开始以 http:。
【讨论】：
规则说，根据the W3C docs：
http: 开头的href 属性的所有锚点
href 属性且以http://mysite.com 或http://www.mysite.com 开头的锚点
【讨论】：
对于每个“href”参数以“http:”开头的链接，将背景设置为关键图像（不重复，位于右上角）。
对于“href”参数以“http://mysite.com”或“http://www.mysite.com”开头的每个链接，将背景图像设置为空（右侧填充为 0 )。
在我看来，这似乎是一个巧妙的 CSS 技巧，可以通过显示关键图像让您的用户知道他们何时通过外部链接离开您的网站。
（我想我以后会用到它。:)
【讨论】：