CSS で属性セレクターを使用して特定のラベルのスタイルを設定するにはどうすればよいですか?

属性セレクターを使用して特定のラベルのスタイルを設定する方法

HTML フォームを使用する場合、独自のスタイルを適用する必要がある場合があります。関連する入力要素に基づく特定のラベル。 CSS では、属性セレクターを使用してこれを実現できます。

「for」属性による属性選択

この例では、 「for」属性の値。その方法は次のとおりです。

label[for="email"] {
  /* Styles here will apply only to the label with the "for" attribute value set to "email" */
}

このセレクターは、値が「email」の「for」属性を持つラベル要素と一致します。その後、ブロック内にカスタム スタイルを適用できます。

実装例

• CSS:

  label[for="email"] {
    color: red;
  }

  ログイン後にコピー

• JavaScript DOM 経由:

  const emailLabel = document.querySelector("label[for=email]");
  emailLabel.style.color = "blue";

  ログイン後にコピー

• jQuery 経由の JavaScript:

  $("label[for=email]").css("color", "green");

  ログイン後にコピー

メモ: 属性セレクターは最新のブラウザーでサポートされていますが、次の点に注意してください。 Internet Explorer の古いバージョンとの互換性の問題。古いブラウザのサポートには、クラスまたはその他の構造メソッドの使用を検討してください。

以上がCSS で属性セレクターを使用して特定のラベルのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。