CSSのクラスclassセレクタの正しい書き方

4708 ワード

css クラスセレクタ classセレクタ

1.

正しい書き方:前はラベル名のワイルドカード、後ろはclassの名前です.()

*.a_class {color:red;}

次の略語はなるべく使わないようにしてください.

.a_class {color:red;}

例:

p.a_class {}

class属性値がa_classのすべての段落です.
例2:

*.a_class {}

「class属性値がa_classのすべてのラベル」として解釈されます.

同じラベルで、classプロパティが2つあります.

class="important warning">
This paragraph is a very important warning.

*.important.warning {background:silver;}

「classプロパティ値はimportantであり、warningのすべてのラベルです」と説明します.

IDセレクタの正しい書き方

*#intro {font-weight:bold;}

セレクタグループ

h1, h2, h3, h4, h5, h6 {color:blue;}

アトリビュート値に関係なく、アトリビュートを持つ要素を選択する場合は、単純なアトリビュートセレクタを使用します.hrefとtitleの両方のプロパティを持つHTMLハイパーリンクのテキストを赤に設定します.

a[href][title] {color:red;}

太陽系惑星を記述するためにXMLドキュメントを設計したと仮定します.moonsプロパティのあるすべてのplanet要素を選択して、moonsのある惑星にもっと注目できるように赤で表示したい場合は、次のように書くことができます.

planet[moons] {color:red;}

特定の属性を持つ要素を選択するだけでなく、選択範囲をさらに縮小し、特定の属性値を持つ要素のみを選択することもできます.たとえば、Webサーバ上の特定のドキュメントへのハイパーリンクを赤にするとします.

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

または、単純プロパティセレクタと同様に、複数のプロパティ値セレクタをリンクしてドキュメントを選択できます.

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

h1 em {color:red;}

(セレクタグループとの違いに注意してください.カンマがなく、カンマがあります.)
メインエリアの背景は白で、メインエリアのリンクは青です.

div.maincontent {background:white;}
div.maincontent a:link {color:blue;}

サブエレメントセレクタ隣接兄弟セレクタ