CSS属性セレクターの詳しい説明

指定された属性を持つ HTML 要素のスタイルを設定します。 class 属性や id 属性だけでなく、指定した属性を持つ HTML 要素のスタイルを設定できます。この記事では主に CSS 属性セレクターに関する知識を紹介しますので、興味のある方はぜひご覧ください。

注: IE7 および IE8 は、!DOCTYPE が指定されている場合にのみ属性セレクターをサポートします。 IE6 以前では、属性の選択はサポートされていません。

属性セレクター

次の例は、title 属性を持つすべての要素をスタイルします:

[title]
{
color:red;
}

属性と値セレクター

次の例は、title="W3School" を持つすべての要素をスタイルします。

[title=W3School]
{
border:5px solid blue;
}

属性および値セレクター - 複数の値

[title~=hello] { color:red; }

次の例では、指定された値を含む lang 属性を持つすべての要素のスタイルを設定します。ハイフンで区切られた属性値に適用されます:

[lang|=en] { color:red; }

フォームのスタイル設定

属性セレクターは、クラスまたは ID なしでフォームをスタイル設定する場合に特に役立ちます:

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}
input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

CSS セレクター リファレンス マニュアル

css属性セレクター - HTML要素のname属性値に基づいて要素を選択します

HTML要素のcss属性を読み書きします

jQuery設定CSS属性の例の紹介_ jクエリ

以上がCSS属性セレクターの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。