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

CSS 属性セレクター: a[href^="..."] の役割を理解する

Web 開発の分野では、 CSS は、Web ページのスタイルを設定する上で重要な役割を果たします。属性セレクターは、開発者が属性に基づいて特定の要素をターゲットにできるようにする CSS 内の強力なツールです。そのような属性セレクターの 1 つが a[href^="..."] です。

次の 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;
}

a[href^=".. ."]

a[href^="..."] セレクターは、すべてのアンカー をターゲットとします。 href 属性値が引用符内の指定された文字列で始まる要素。この場合、 がターゲットになります。 「http:」で始まる href 値を持つ要素。

使用例

たとえば、次の HTML コードがあるとします。

<a href="https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9">Google</a>
<a href="https://www.php.cn/link/9d70ada63ee39c2f16e678bbf698df46">YouTube</a>
<a href="/about-us">About Us</a>

上記の CSS コードをこの HTML に適用すると、最初の 2 つのリンク ( と ) のスタイルが設定されます。緑色の背景と右上の画像。 3 番目のリンクは影響を受けません。

追加メモ

セレクター内の ^ 文字は値の始まりを示します。属性セレクターで使用できるその他の演算子は次のとおりです。

• $=:
• で終わる*=:
• を含む|=: 完全一致 (

でのみ機能)クラスとID属性)

結論

CSS における a[href^="..."] の役割を理解することで、効果的にターゲットを絞ってスタイルを特定することができますhref 属性に基づいて要素をアンカーします。この柔軟性により、Web ページのデザインの制御と精度が向上します。

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