ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS属性セレクターの使い方を詳しく解説(CSS入門編)

CSS属性セレクターの使い方を詳しく解説(CSS入門編)

(*-*)浩
リリース: 2019-11-26 13:38:13
オリジナル
3045 人が閲覧しました

CSS属性セレクターの使い方を詳しく解説(CSS入門編)

#指定された属性を持つ HTML 要素のスタイルを設定します。 (推奨学習: CSS 入門チュートリアル )

class 属性や id 属性だけでなく、指定した属性を使用して HTML 要素のスタイルを設定できます。

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

属性セレクター

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

[title]
{
color:red;
}
ログイン後にコピー

属性と値のセレクター

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

[title=hello]
{
border:5px solid blue;
}
ログイン後にコピー

属性と値のセレクター - 複数の値

次の例のセット指定された値を持つ title 属性を含むすべての要素のスタイル。空白で区切られた属性値に適用されます:

[title~=hello] { color:red; }
ログイン後にコピー

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

[lang|=en] { color:red; }
ログイン後にコピー

フォームのスタイルの設定

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

rree

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

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート