CSSクラスセレクター(4)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSSクラスセレクター(4)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:46:30

オリジナル

1536 人が閲覧しました

1. クラスセレクター

クラスの選択は「.」 (英語のドット) でマークされ、その後にクラス名が続きます

例:

.red{color:red;}

ログイン後にコピー

クラススタイルはドキュメント内の複数の項目に適用できますこの要素は CSS コードの再利用性を反映し、ユーザーがページ制御を簡素化するのに役立ちます。

2. クラスセレクターとラベルセレクター

クラスセレクターとラベルセレクターはどちらも 1 対多の特性を持ち、1 つのスタイルで複数の要素オブジェクトの表示効果を制御できます。

注:

クラスセレクターは、タグセレクターと比較して、クラスのスタイルを適用する要素オブジェクトの範囲を指定できるため、適応性と柔軟性が優れています

クラスセレクターありタグセレクターとの比較クラスセレクターを使用する前に、要素ごとに同じクラス属性を定義する必要がないため、操作が簡単で定義が便利であるという利点があります。 class スタイルが適用されるため、これはさらに面倒であることを示しています。

タグセレクターは要素のグローバル表示属性を定義するのに適していますが、クラスセレクターはクラススタイルを定義するのに適しています。タグセレクターのスタイルを定義すると、ページ上の同じ要素に確実に影響します。およびクラスセレクター定義されたスタイルは適用されないため、柔軟性が高まります。

<!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 は下線付きのクラスを定義します。など。

CSSクラスセレクター(4)_html/css_WEB-ITnose

1. クラス セレクター

1. クラスセレクター