web-dev-qa-db-ja.com

CSSでa [href ^ = "..."]は何をしますか？

私は以前に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;
}
csscss3css-selectors
37
user443946
a[href^="http:"]

href属性値が<a>で始まるhttp:要素を選択します。

例：

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

次と一致します。

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

これは、CSS3で利用可能な substring-matching attribute selectors の1つです。値が指定された文字列で始まる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_で始まります。

    2番目のセレクターは最初のセレクターを無効にするため、背景画像と右のパディングは削除されます。

  4. _a[href^="http:"]_および_a[href^="http://www.mysite.com"]_によって選択
    この要素の_href="http://www.mysite.com"_属性は_http:_で始まり、さらに_http://www.mysite.com_で始まります（wwwに注意してください）。

    2番目のセレクターは最初のセレクターを無効にするため、背景画像と右のパディングは削除されます。

  5. _a[href^="http:"]_および_a[href^="http://mysite.com"]_によって選択
    この要素の_href="http://mysite.com/page.php"_属性は_http:_で始まり、さらに_http://mysite.com_で始まります。

    3番目のリンクと比較して、このリンクの属性にはベースURL以外のものが含まれていることに注意してください。ただし、_^=_は、属性の値がstart withである必要があることを示します。これは、_=_ではなく、「_http://mysite.com_」。したがって、このリンクは2番目のセレクターと一致します。

    2番目のセレクターは最初のセレクターを無効にするため、背景画像と右のパディングは削除されます。

27
BoltClock

これらは attribute-starts-with selectors であり、その値で始まるhref属性を持つ<a>要素を選択します。 a[href^="http:"]は、href="http:...."で始まるhrefを持つすべてのアンカーに一致します。例：

<a href="http://www.google.com">Test</a> <!-- would match -->
<a href="#element">Test</a>              <!-- wouldn't match -->
6
Nick Craver

「href」パラメーターが「http：」で始まるすべてのリンクについて、背景をキー画像に設定します（繰り返しなし、右上隅に配置）。

「href」パラメーターが「http://mysite.com」または「http://www.mysite.com」で始まるすべてのリンクについて、背景画像を何も設定しない（および右側のパディングを0に設定する）。

私にとって、これは、ユーザーが重要な画像を表示することで外部リンクを介してWebサイトを離れていることをユーザーに気付かせる巧妙なCSSトリックのように思えます。

（今後使用する予定です。）

5
Lazlo

W3C docs によると、ルールは言う：

  • http:で始まるhref属性を持つすべてのアンカー
  • http://mysite.comまたはhttp://www.mysite.comで始まるhref属性を持つすべてのアンカー
0
rfunduk

属性セレクターです。
^ =部分は、アンカータグのhref属性がbegin with http:最初の例では。

0
chigley