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中可用的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样式。输出样式在注释中进行了总结：

<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;但是，^=表示该属性的值只需以您网站的基本网址开头，而不是=，这意味着“选择仅指向{{的链接” 1}}”。因此，此链接由第二个选择器匹配。

由于第二个选择器取代了第一个选择器，因此删除了背景图像和右边的填充。

Answer 3

这些是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 -->

Answer 4

对于“href”参数以“http：”开头的每个链接，将背景设置为关键图像（不重复，位于右上角）。

对于“href”参数以“http://mysite.com”或“http://www.mysite.com”开头的每个链接，将背景图像设置为空（并将右侧边距设置为0））。

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

（我想我将来会用它。:)

Answer 5

规则说，根据the W3C docs：

所有href属性以http:
所有href属性的锚点均以http://mysite.com或http://www.mysite.com

Answer 6

这是一个属性选择器 ^ = 部分表示在第一个示例中，锚标记的href属性必须开始并带有http:。

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

6 个答案: