【问题标题】:What does a[href^="..."] do in CSS?a[href^="..."] 在 CSS 中做了什么?
【发布时间】:2011-04-21 00:30:23
【问题描述】:

我以前使用过 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


【解决方案1】:
a[href^="http:"] 

选择一个<a> 元素,其href 属性值以http: 开头。

例如:

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

将匹配以下内容:

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

【讨论】:

    【解决方案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 的样式。输出样式汇总在 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>
    

    发生了什么事?

    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 的链接”。因此,此链接由第二个选择器匹配。

      由于第二个选择器覆盖了第一个选择器,因此背景图像和右侧填充被移除。

    【讨论】:

      【解决方案3】:

      这些是attribute-starts-with selectors,他们将选择&lt;a&gt; 元素,其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 -->
      

      【讨论】:

      • 所以你的意思是如果有一个css选择器说 a[href^=”google.com”] { color: red;} 只有一个具有 href="www.google 的锚链接.com”会变成红色吗?
      • @user443946 - 不,但如果两者都有www.,那么它将是红色的,它必须以 exactly 相同的字符串开头。在此处测试:jsfiddle.net/nick_craver/7hnAB(确保您使用的是支持选择器的较新浏览器)。
      • 是用这个正则表达式吗? [^ ](来自 wikipedia 的引用如下)匹配括号内未包含的单个字符。例如,[^abc] 匹配除“a”、“b”或“c”之外的任何字符。 [^a-z] 匹配从“a”到“z”的任何非小写字母的单个字符。如上所述,文字字符和范围可以混合使用。
      • @orolo - 这不是正则表达式,只有特定的情况有效,这里有一个表格:w3.org/TR/css3-selectors/#selectors
      • @user443946:只有当标签是&lt;a href="google.com/somethind" ...时才会匹配。选择器不检查语义,它只是比较属性内部的内容,如果值以与选择器中相同的文本开头,则匹配。
      【解决方案4】:

      这是一个属性选择器。
      ^= 部分意味着在您的第一个示例中,锚标记的 href 属性必须开始http:

      【讨论】:

        【解决方案5】:

        规则说,根据the W3C docs

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

        【讨论】:

          【解决方案6】:

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

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

          在我看来,这似乎是一个巧妙的 CSS 技巧,可以通过显示关键图像让您的用户知道他们何时通过外部链接离开您的网站。

          (我想我以后会用到它。:)

          【讨论】:

            猜你喜欢
            • 2015-12-03
            • 1970-01-01
            • 1970-01-01
            • 2017-12-12
            • 1970-01-01
            • 2014-04-29
            • 2018-01-12
            • 2016-06-09
            • 2021-11-15
            相关资源
            最近更新 更多