ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSクラスセレクター(4)_html/css_WEB-ITnose
CSSクラスセレクター(4)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:46:301536ブラウズ
1. クラス セレクター
クラスの選択は「.」 (英語のドット) でマークされ、その後にクラス名が続きます
例:
.red{color:red;} クラス スタイルはドキュメント内の複数の項目に適用できますこの要素は CSS コードの再利用性を反映し、ユーザーがページ制御を簡素化するのに役立ちます。 2. クラス セレクターとラベル セレクター
クラス セレクターとラベル セレクターはどちらも 1 対多の特性を持ち、1 つのスタイルで複数の要素オブジェクトの表示効果を制御できます。
注:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>伪类和伪对象选择器</title><link type="text/css" rel="stylesheet" href="css/demo4.css"/></head><body><div></div><div class="red"></div></body></html>
css
@charset "utf-8";/* CSS Document */div{ width:400px; height:200px; background-color:blue; }.red{background-color:red;} Result:
3. クラスセレクターと ID セレクター
異なるアプリケーションスコープに加えて、クラスセレクターと ID セレクターも同じ条件下で異なる優先順位を持ちます。 ID セレクターはクラス セレクターよりも優先されます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>伪类和伪对象选择器</title><link type="text/css" rel="stylesheet" href="css/demo4.css"/></head><body><div id="text" class="red"></div></body></html>
CSS
@charset "utf-8";/* CSS Document */div{ width:400px; height:200px; }#text{ background-color:blue; }.red{background-color:red;} div は青色で表示されます
一般的には:
ID セレクター: アプリケーション実装 などのドキュメントの構造と位置#header、#footer、#left など、
クラス セレクター: クラス属性は名前の記述スタイルを反映する必要があり、.red などのクラス名を見て定義するスタイルを理解できるようにする必要があります。 , 赤いクラスを定義し、.underline は下線付きのクラスを定義します。など。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。