cssクラスセレクタの使用方法の詳細
9625 ワード
クラスセレクタCSSでは、クラスセレクタがポイントで表示されます.
上記の例では、centerクラスを持つすべてのHTML要素が中央に配置されています.
次のHTMLコードでは、h 1とp要素にcenterクラスがあります.これは、両方とも「.center」セレクタのルールを遵守することを意味します.
注意:クラス名の最初の文字は数値を使用できません.MozillaまたはFirefoxでは機能しません.
idと同様にclassは派生セレクタとしても使用できます.
上記の例では、fancyというより大きな要素の内部のテーブルユニットにオレンジ色の文字が灰色の背景で表示されます.(fancyというより大きな要素はテーブルまたはdivである可能性があります)
要素はクラスに基づいて選択することもできます.
上記の例では、fancyというクラス名のテーブルユニットは、灰色の背景を持つオレンジ色になります.
.center {text-align: center}
上記の例では、centerクラスを持つすべてのHTML要素が中央に配置されています.
次のHTMLコードでは、h 1とp要素にcenterクラスがあります.これは、両方とも「.center」セレクタのルールを遵守することを意味します.
This heading will be center-aligned
This paragraph will also be center-aligned.
注意:クラス名の最初の文字は数値を使用できません.MozillaまたはFirefoxでは機能しません.
idと同様にclassは派生セレクタとしても使用できます.
.fancy td {
color: #f60;
background: #666;
}
上記の例では、fancyというより大きな要素の内部のテーブルユニットにオレンジ色の文字が灰色の背景で表示されます.(fancyというより大きな要素はテーブルまたはdivである可能性があります)
要素はクラスに基づいて選択することもできます.
td.fancy {
color: #f60;
background: #666;
}
上記の例では、fancyというクラス名のテーブルユニットは、灰色の背景を持つオレンジ色になります.
1、 HTML ， class ， 。 ， （important） （warning）， （ ， warning important ）：
This paragraph is a very important warning.
class important ， class warning ，class important warning 。 ：
.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}
2、 ， （ ）。
， 。 ：
.important.urgent {background:silver;}
， class important urgent p 。 ， p class important warning， 。 ， ：
This paragraph is a very important and urgent warning.