CSS中有[href ^ ="..."]做什么？

Question

我之前使用过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;
}

Answer 1

a[href^="http:"] 

选择属性值<a>以其href开头的元素http:.

例如:

p[title^="para"] {background: green;}

将匹配以下内容:

<p title="paragraph"> This paragraph should have a green background. </p> 

Answer 2

这是CSS3中可用的子字符串匹配属性选择器之一.它匹配具有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样式.输出样式在注释中进行了总结:

<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>

发生了什么？

1. a仅选择
   此元素的href="/index.php"属性不http:以其他值开头.

   没有背景,但有左右填充.

2. a[href^="http:"]仅选择
   此元素的href="http://example.com"属性以http:但不是以...开头http://mysite.com.

   左右填充和背景图像都有.

3. 选择者a[href^="http:"]和,a[href^="http://mysite.com"]
   此元素的href="http://mysite.com"属性以"开始" http:并进一步开始http://mysite.com.

   由于第二个选择器否决了第一个选择器,因此删除了背景图像和右边距.

4. 选择者a[href^="http:"]和,a[href^="http://www.mysite.com"]
   此元素的href="http://www.mysite.com"属性以#开头http:并进一步开始http://www.mysite.com(注意www).

   由于第二个选择器否决了第一个选择器,因此删除了背景图像和右边距.

5. 选择者a[href^="http:"]和,a[href^="http://mysite.com"]
   此元素的href="http://mysite.com/page.php"属性以"开始" http:并进一步开始http://mysite.com.

   请注意,与第三个链接相比,此属性中的属性不仅包含基本URL; 然而,^=则表明此属性的值只需要与启动您的网站的基本URL,而不是=这意味着"选择链接只指向http://mysite.com".因此,此链接由第二个选择器匹配.

   由于第二个选择器否决了第一个选择器,因此删除了背景图像和右边距.

Answer 3

这些是属性开始 - 使用选择器,它们将选择<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 -->

Answer 4

对于"href"参数以"http:"开头的每个链接,将背景设置为关键图像(不重复,位于右上角).

对于"href"参数以"http://mysite.com"或"http://www.mysite.com"开头的每个链接,将背景图像设置为空(并将右侧边距设置为0).

对我而言,这似乎是一个聪明的CSS技巧,通过显示关键图像,让用户了解他们何时通过外部链接离开您的网站.

(我想我将来会用它.:)