CSSセレクタ
1. CSSセレクタの役割
指定されたHTMLページ要素を選択します
- たとえば、次のコードは、それが選出さH3は、その後、赤に設定し、2つのことを行います。
h3 {
color: red;
}
複合ベースのセレクタと、セレクタにセレクタ
2. CSSベースのセレクタ
2.1タグセレクタ
-
コンセプト：
タグセレクタ（要素セレクタ）使用を意味するHTMLタグの名前のは、ラベルのいくつかの並べ替えのページのための統一されたCSSスタイルを指定し、タグ名で分類セレクタ、と呼ばれます。
-
構文：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-
役割：
クラスラベルを選択することができ、タグはすべて、すべてのdivタグなどを選択して、すべてのスパンにラベルを付けます
-
利点：
これは、均一なスタイルの同じタイプのラベルページへの迅速です
-
短所：
デザインは、スタイルを区別することはできません。
2.2クラスセレクタ
クラスセレクタの使用「」（ドット英語）、識別されたクラス名が続きます。
-
構文：
- タグ
<p class='类名'></p>- クラス名セレクタ
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } -
利点：
- またはそれは別個の要素は、同じパターンを画定することができます。あなたは、1つ以上のタグを選択することができます
-
注記
- 使用するクラスセレクタ。「」（英語ドット）、識別されたクラス名（カスタム、私たち自身の命名）が続いています
- 命名の選択に使用される単一の行に長い名前やフレーズ。
- 純粋でない数字、および他の中国の名前を行い、英語の文字を使用してみてください。
2.2.1クラスセレクタ特殊な使い方 - クラス名以上
より多くの選択肢の目的を達成するために、あなたは、タグに複数のクラス名を指定することができます。
注意：
- ミドルクラス名は、それぞれのスペースで区切られています。
<div class="pink fontWeight font20">亚瑟</div>
<div class="font14 pink">安其拉</div>
2.3 IDセレクタ
IDセレクタを使用し#、ID、続いて、同定します
-
次のように基本的な構文は次のとおりです。
-
タグ
<p id="id名"></p> -
IDセレクタ
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-
-
IDは、要素のユニークな値、特定の要素に対応する唯一の文書です。
-
そして、同じ基本クラスセレクタを使用します。
IDセレクタとクラス区別セレクタ
- W3Cの標準は、同じページに、同じ名前のIDのオブジェクトが表示さを持つことができますが、同じ名前のクラスが可能ではありません。そのIDはユニークです。
- 頻繁にクラスセレクタのスタイルの変更インチ
- IDセレクタは、一般的に、多くの場合、JavaScriptを使用して、身体のページ要素の一意のために使用されます。
2.4ワイルドカードセレクタ
-
コンセプト
使用済み選択し、ワイルドカード
*を示す記号を、*それは最も広くスコープ内のすべてのセレクタの使用、ページがすべての要素を一致させることができているすべてのラベルを選択することです。 -
次のように基本的な構文は次のとおりです。
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 次のコード例では、ワイルドカードセレクタCSSスタイル定義を使用して、すべてのHTMLタグのデフォルトの余白を削除します。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
-
注意：
会匹配页面所有的元素，降低页面响应速度，不建议随便使用
2.5基礎セレクタ要約
| セレクタ | 効果 | 短所 | 使い方 | 使い方 |
|---|---|---|---|---|
| タグセレクタ | すべて同じラベルは、pと、選択することができます | 分化は、選択することはできません | もっと | P {色：赤;} |
| クラスセレクタ | あなたは、選択または複数のタグすることができます | ニーズに応じて選択することができます | はるかに | .nav {色：赤。} |
| IDセレクタ | あなただけの1個のタグを選択することができます | それは一度のみを使用することができます | お勧めできません | #nav {色：赤;} |
| ワイルドカードセレクタ | すべてのラベルを選択します | いくつかの必要はありませんあまりにも多くのオプション、 | お勧めできません | * {赤色;} |
2.6備考
セレクタ
- ユニバーサルセレクタの使用を最小限に抑えます
* - IDセレクタの使用を最小限に抑え
- 具体的な定義のセマンティックタグセレクタdivのスパンを使用していないなし
/* 推荐 */
.jdc {}
li {}
p{}
/* 不推荐 */
*{}
#jdc {}
div{} 因为div 没有语义，我们尽量少用
