1つは、ラベルセレクターです。
タグセレクターとは、HTMLタグ名をセレクターとして使用し、タグ名で分類し、ページ上の特定のタイプのタグに統一されたCSSスタイルを指定することを指します。
基本的な構文形式は次のとおりです。
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
....
}
特徴:
- タグセレクターは、ページ上の同じタイプのタグのスタイルをすばやく統合できますが、これも欠点であり、差別化されたスタイルを設計することはできません。
- タグセレクターは、特定のタイプのすべてのタグを選択できます。
次に、クラスセレクター
クラスセレクタは、「。」(ドット表記)とそれに続くクラス名で識別され、その基本的な構文形式は次のとおりです。
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
ラベルが呼び出されたら、class = "クラス名"を使用します。
クラスセレクターの利点:
要素オブジェクトに個別または同一のスタイルを定義できます。1つ以上のタグを選択できます。
チップ:
- 長い名前またはフレーズでは、水平線を使用してセレクターに名前を付けることができます。
- CSSセレクターに名前を付けるために「_」アンダースコアを使用することはお勧めしません。
- 数字や中国語などだけで名前を付けるのではなく、英語の文字を使用して表現してください。
3つの複数のクラス名セレクター
より多くの選択目的を達成するために、ラベルに複数のクラス名を割り当てることができます。後のレイアウトがより複雑な場合は、マルチカテゴリ名セレクターがさらに使用されます。
注意:
- スタイル表示効果は、HTML要素内のクラス名の順序とは関係ありませんが、CSSスタイルの記述の上下の順序に関連しています。
- 各クラス名はスペースで区切ります。
4、IDセレクター(最高の優先順位)
IDセレクターは、識別に「#」を使用し、その後にID名を使用します。基本的な構文形式は、次のとおりです。
#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
この文法では、id名はHTML要素のid属性値です。ほとんどのHTML要素はid属性を定義できます。要素のid値は一意であり、ドキュメント内の特定の要素にのみ対応できます。使い方は基本的にクラスセレクターと同じです。
IDセレクターとクラスセレクターの違い:
W3Cは、同じ名前のidオブジェクトは同じページで許可されないことを規定していますが、同じ名前のクラスは許可されます。
クラスセレクター(クラス)は人の名前のようなもので、Zhang Wei、Wang Wei、Li Wei、LiNaなど何度でも再利用できます。
IDセレクターは個人のID番号のようなもので、中国で一意であり、繰り返さないでください。
5、ワイルドカードセレクター
ワイルドカードセレクターは「*」記号で表され、すべてのセレクターの中で最も広い範囲を持ち、ページ上のすべての要素に一致する可能性があります。基本的な構文形式は次のとおりです。
* {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
ワイルドカードセレクターを使用してCSSスタイルを定義し、すべてのHTMLタグのデフォルトの余白をクリアします。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
6、複合セレクター
(1)、交差点セレクター
交差セレクターは2つのセレクターで構成され、1つ目はラベルセレクター、2つ目はクラスセレクターであり、h3.specialのように2つのセレクターの間にスペースを入れることはできません。
(2)、ユニオンセレクター
ユニオンセレクター(CSSセレクターグループ)は、<strongstyle = "color:#f00">カンマ</ strong>で接続された各セレクターで構成されます。任意の形式のセレクター(ラベルセレクター、クラス選択を含む)IDセレクターなど。 )ユニオンセレクターの一部として使用できます。一部のセレクターによって定義されたスタイルがまったく同じまたは部分的に同じである場合は、ユニオンセレクターを使用してそれらに同じCSSスタイルを定義できます。
(3)、子孫セレクター [セレクター1セレクター2]、スペースで区切る
子孫セレクターは、包含セレクターとも呼ばれ、要素または要素グループの子孫を選択するために使用されます。これは、前面に外側のラベルを、背面に内側のラベルを、中央のスペースで区切って書き込むことによって記述されます。 。タグがネストされると、内側のタグが外側のタグの子孫になります。
(4)、子セレクター 【セレクター1>セレクター2】
子要素セレクターは、特定の要素の子要素である要素のみを選択できます。書き込み方法は、親ラベルを前面に、子ラベルを背面に書き込み、中央に接続する方法です。シンボルの左右にスペースがありますのでご注意ください。
7つの疑似クラスセレクター
リンク疑似クラスセレクター:
:link /* 未访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
:visited /* 已访问的链接 */
書くときは、lhavの順序に従って、それらの順序をできるだけ逆にしないでください。