`a[href^='...']` のような CSS セレクターはどのようにして特定のアンカー要素をターゲットにするのでしょうか?

CSS セレクターの解読: a[href^="..."]

CSS セレクターを理解すると、次のように指定することで HTML 要素を正確に制御できます。満たさなければならない基準。このようなセレクターの 1 つは a[href^="..."] で、href 属性値の先頭に特定の文字列が存在することに基づいてアンカー () 要素をターゲットにします。

検討してください。次の CSS コード:

a[href^="http:"] {
   background: url(img/keys.gif) no-repeat right top;
}

このセレクターは、href 属性値が「http:」で始まるすべてのアンカー要素に一致します。その結果、「http:」で始まる href 属性を持つ HTML ドキュメント内のリンクには、背景画像などの指定されたスタイルが適用されます。

さらに詳しく説明するために、次の HTML コードがあるとします。

<a href="http://example.com">Example Website</a>
<a href="https://anothersite.net">Another Site</a>

前述の CSS コードを適用すると、その href 属性がセレクターの基準 (`href^="http:") に一致するため、最初のリンクにのみ影響します。背景画像はこのリンクを飾りますが、2 番目のリンクは影響を受けません。

別の例を次に示します。

a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
   background-image: none; padding-right:0;
}

このセレクターは、「http:」のいずれかで始まる href 属性値を持つアンカー要素をターゲットにします。 //mysite.com」または「http://www.mysite.com」。これらのパターンに一致する HTML コード内のリンクはすべて、背景画像が削除され、右側のパディングが 0 に設定されます。

以上が`a[href^='...']` のような CSS セレクターはどのようにして特定のアンカー要素をターゲットにするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。