3種類のcssセレクタの単独と連合作戦

cssでよく使われるセレクタは3種類あります.要素セレクタ、クラスセレクタ、IDセレクタです.今、それらの風貌を見てみましょう.
     1.エレメントセレクタ
単独で出すのは簡単です.

html {color: blue;}/*               */
p {color: gray;}/*               */
h4 {color: red;}/*    h4              */
h2 {font-family: sans-serif }/*    h2            sans-serif  */

このほか、グループ化して使用することもできます.

h4，p {color: red;}/*    h4  ，                */

h 2セレクタとpセレクタをルールの左側に配置し、カンマで区切り、カンマでブラウザに2つの異なるセレクタが含まれていることを伝えます.このカンマがなければ、ルールの意味はまったく異なり、右側はh 4とp要素の共通のルールです.
     2.クラスセレクタ
 

.home {
    font-weight: bold;/*        */
    color: #767571;/*      */
}

以上のように、エレメントセレクタと比較して使用する場合はクラス名の前にドットを付け、アスタリスクは共通セレクタを示し、次にドットの前にアスタリスクを付けるコードは上のコードと何の違いもありません

*.home {
    font-weight: bold;/*   home        */
    color: #767571;/*    home        */
}

   3.IDセレクタ
 

#selected{
    color: white;/* id selected             */
    background-color: black;/* id selected          */
}

クラスセレクタと比較して、1つの違いはポイント番号の井戸番号であり、また、同じIDセレクタがhtmlドキュメントで1回しか使用できないことであり、ID属性にはスペースで区切られた語リストが許可されていないことです.
 
    4.セレクタの配合使用
独木難成林、実際の応用では、セレクタを組み合わせてよく使用します.例えば、リストのa要素を通常の太字ではなく斜体字にしたい場合は、派生セレクタを定義することができます.
 

li a {
    font-style: italic;
    font-weight: normal;
  }

たとえば、IDセレクタと要素セレクタを組み合わせて派生します.
 
 

#cart p {
	font-style: italic;/*  */
	text-align: center;/*    */
	}

idはcartの要素内の段落のテキストが斜体字になり、位置が水平中央になる.
 
idと同様にclassは派生セレクタとしても使用できます.

.item td {
        color: #f60f60;
	background: #666666;
	}   

要素はクラスに基づいて選択することもできます.

td.item {
        color: #f60f60;
	background: #666666;
	}   

また、クラスセレクタとIDセレクタは、大文字と小文字を区別する場合があります.これは、ドキュメントの言語によって異なります.HTMLとXHTMLは、クラスとIDの値を大文字と小文字を区別するように定義しているので、クラスとIDの値の大文字と小文字は、ドキュメント内の対応する値と一致する必要があります.

#sleeping {font-weight:bold;}
<p id="Sleeping">The baby is sleeping.</p>

上記idがsleepingの段落は太字になりません.