a[href^="..."] 在 CSS 中有什么作用？

What does a[href^="..."] do in CSS?

提问by user443946

I have used CSS before and I came across the below CSS style, don't have a clue what it does.

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

回答by Russell Dias

a[href^="http:"] 

Selects an <a>element whose hrefattribute value begins with http:.

选择属性值以 开头的<a>元素。hrefhttp:

For example:

例如：

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

Will match the following:

将匹配以下内容：

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

回答by BoltClock

That's one of the substring-matching attribute selectorsavailable in CSS3. It matches links with hrefattributes whose values start with the given string.

这是CSS3 中可用的子字符串匹配属性选择器之一。它匹配href具有以给定字符串开头的属性的链接。

To illustrate, we'll take your example CSS, and add some defaults:

为了说明，我们将采用您的示例 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;
}

And style the following HTML with it. The output styles are summarized in comments:

并使用它设置以下 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>

What's happening?

发生了什么？

1. Selected by aonly
   This element's href="/index.php"attribute doesn't start with http:or the other values.

   There is no background, but there is left and right padding.

2. Selected by a[href^="http:"]only
   This element's href="http://example.com"attribute starts with http:but doesn't start with http://mysite.com.

   There is both left and right padding, and a background image.

3. Selected by a[href^="http:"]and a[href^="http://mysite.com"]
   This element's href="http://mysite.com"attribute starts with http:and further starts with http://mysite.com.

   Since the second selector overrules the first selector, the background image and right padding are removed.

4. Selected by a[href^="http:"]and a[href^="http://www.mysite.com"]
   This element's href="http://www.mysite.com"attribute starts with http:and further starts with http://www.mysite.com(notice the www).

   Since the second selector overrules the first selector, the background image and right padding are removed.

5. Selected by a[href^="http:"]and a[href^="http://mysite.com"]
   This element's href="http://mysite.com/page.php"attribute starts with http:and further starts with http://mysite.com.

   Notice that, compared to the third link, the attribute in this one contains more than just the base URL; however, the ^=indicates that the attribute's value just needs to start withyour site's base URL, as opposed to =which would mean "select links that only point to http://mysite.com". Therefore, this link is matched by the second selector.

   Since the second selector overrules the first selector, the background image and right padding are removed.

1. Selected by aonly
   此元素的href="/index.php"属性不以http:或 其他值开头。

   没有背景，但有左右填充。

2. Selected by a[href^="http:"]only
   此元素的href="http://example.com"属性以 开头http:但不以 开头http://mysite.com。

   有左右填充和背景图像。

3. Selected by a[href^="http:"]anda[href^="http://mysite.com"]
   此元素的href="http://mysite.com"属性以 开头，http:进一步以 开头http://mysite.com。

   由于第二个选择器否决了第一个选择器，因此删除了背景图像和右侧填充。

4. Selected by a[href^="http:"]anda[href^="http://www.mysite.com"]
   此元素的href="http://www.mysite.com"属性以 开头http:并进一步以 开头http://www.mysite.com（注意 www）。

   由于第二个选择器否决了第一个选择器，因此删除了背景图像和右侧填充。

5. Selected by a[href^="http:"]anda[href^="http://mysite.com"]
   此元素的href="http://mysite.com/page.php"属性以 开头，http:进一步以 开头http://mysite.com。

   请注意，与第三个链接相比，此链接中的属性不仅仅包含基本 URL；但是，^=表示该属性的值只需要以您网站的基本 URL开头，而不是=表示“选择仅指向http://mysite.com”的链接。因此，此链接由第二个选择器匹配。

   由于第二个选择器否决了第一个选择器，因此删除了背景图像和右侧填充。

回答by Nick Craver

Those are attribute-starts-with selectors, they'll select <a>elements with an hrefattribute starting with that value, e.g. a[href^="http:"]matches any anchors with an hrefstarting with href="http:....", for example:

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

回答by Lazlo

For every link which's "href" parameter starts with "http:", set the background to a key image (without repetition, positioned in the top-right corner).

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

For every link which's "href" parameter starts with "http://mysite.com" or "http://www.mysite.com", set the background image to nothing (and the right-side padding to 0).

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

To me, this seems like a clever CSS trick that will make your users aware of when they are leaving your website through an external link by displaying a key image.

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

(I think I'll use it in the future. :)

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

回答by rfunduk

The rules say, according to the W3C docs:

根据W3C 文档，规则说：

• All anchors which have an hrefattribute that starts with http:
• All anchors which have an hrefattribute that start with http://mysite.comor http://www.mysite.com

• 具有以href开头的属性的所有锚点http:
• 具有href以http://mysite.com或开头的属性的所有锚点http://www.mysite.com

回答by chigley

It's an attribute selector.
The ^=part means that the href attribute of the anchor tags must beginwith http:in your first example.

这是一个属性选择器。
该^ =零件的意思是锚标记的href属性必须开始与http:你的第一个例子。