在CSS中做什么？
我之前使用过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; } a[href^="http:"]
select一个<a>元素，其href属性值以http:开头。
例如：
p[title^="para"] {background: green;}
将匹配以下内容：
<p title="paragraph"> This paragraph should have a green background. </p>
这是CSS3中可用的子string匹配属性select器之一。 它匹配链接与值的开始与给定的string的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; }
并用它来devise下面的HTML。 输出样式汇总在注释中：
<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唯一的select
该元素的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开头。由于第二个select器否决了第一个select器，所以删除了背景图像和右边的填充。
-
由
a[href^="http:"]和a[href^="http://www.mysite.com"]选定
该元素的href="http://www.mysite.com"属性以http:开头，并以http://www.mysite.com开头（注意www）。由于第二个select器否决了第一个select器，所以删除了背景图像和右边的填充。
-
通过
a[href^="http:"]和a[href^="http://mysite.com"]
这个元素的href="http://mysite.com/page.php"属性以http:开头，然后从http://mysite.com开始。请注意，与第三个链接相比，这个链接中的属性不仅包含基本的URL， 然而，
^=表示该属性的值只需要以您的网站的基本url开始，而不是=这意味着“select仅指向http://mysite.com链接”。 因此，该链接与第二个select器相匹配。由于第二个select器否决了第一个select器，所以删除了背景图像和右边的填充。
这些是属性开始 – select器 ，他们将select具有以该值开始的href属性的<a>元素，例如a[href^="http:"]匹配具有以href="http:...." ，例如：
<a href="http://www.google.com">Test</a> <!-- would match --> <a href="#element">Test</a> <!-- wouldn't match -->
对于“href”参数以“http：”开始的每个链接，将背景设置为关键图像（不重复，位于右上angular）。
对于“href”参数以“http://mysite.com”或“http://www.mysite.com”开头的每个链接，将背景图像设置为空（而右侧填充为0）。;
对我来说，这似乎是一个聪明的CSS技巧，可以让你的用户知道他们何时离开你的网站通过外部链接显示一个关键图像。
（我想我会在将来使用它:)
规则说，根据W3C文档 ：
- 所有具有以
http: - 所有具有以
http://mysite.com或http://www.mysite.com开头的href属性的锚
这是一个属性select器。
^ =部分表示定位标记的href属性必须以第一个示例中的http: 开头 。
