CSSクラスセレクタの知識点

1380 ワード

1.HTMLでは、1つのclass値に単語のリストが含まれ、各単語間をスペースで区切ることができます.
たとえば、特定の要素を重要(important)と警告(warning)と同時にマークする場合は、
書くことができます(この2つの語の順序は重要ではありません.warning importantと書いてもいいです):
<p class="important warning">This paragraph is a very important warning.</p>

classがimportantのすべての要素が太字であり、classがwarningのすべての要素が斜体であると仮定します.
classにはimportantとwarningのすべての要素が同時に含まれており、銀色の背景もあります.次のように書くことができます.
.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

2、2つのクラスセレクタをリンクすることで、これらのクラス名を同時に含む要素のみを選択できます(クラス名の順序は限定されません). 
マルチクラスセレクタにクラス名リストにないクラス名が含まれている場合、一致は失敗します.次のルールを参照してください.
.important.urgent {background:silver;}
このセレクタは、classプロパティに含まれる単語importantおよびurgentのp要素のみに一致します.
したがって、p要素のclassプロパティにimportantまたはwarningという単語しかない場合は、一致しません.
次の要素に一致します.
<p class="important urgent warning">This paragraph is a very important and urgent warning.</p>

3、以下の3つの書き方の違いに注意してください.
.important.warning {background:silver;}  /*      important warning   ,    */
.important,.warning {background:silver;} /*    important warning   ,    */
.important .warning {background:silver;} /*        important,    warning   ,     */