各種 CSS セレクター、インポート スタイル シート、およびいくつかの疑似クラス セレクターの詳細な説明

(1) CSS セレクター:

1. タグセレクター: HTML タグ名でタグを直接選択

2. クラスセレクター: クラス属性が追加されたタグをセレクター名で選択 {} 選択

3 . ID セレクター: #selector name {} を使用して、ID 属性が追加されたタグを選択します。ID は HTML ドキュメント内の唯一のタグです

4. ユニバーサル セレクター: *{} を使用して、HTML ドキュメント内のすべてのタグを選択します

5.子孫セレクター: セレクター 1 (スペース) セレクター 2 で、タグ内の対応するすべてのサブタグを選択します

6. 子孫セレクター: セレクター 1>セレクター 2 から、タグ内の直接のサブタグの選択は、より深いものでは機能しません

7. 交差セレクター: セレクター 1 (中央にスペースなし) セレクター 2 たとえば、#li.li{} は ID=li と class=li のタグを選択します

8. ユニオンセレクター: セレクター 1、セレクター 2 たとえば: #li.li{} ID=li または class=li のタグを選択

(2) セレクターの優先順位:

1. たとえば、同じレイヤー上のタグに適用される場合、これらはすべてタグ li に直接作用します。 IDセレクター > クラスセレクター > タグセレクター > ユニバーサルセレクター

2. 最も内側のセレクターは最も外側のセレクターより小さい 優先度: div ul li>#ul li タグは ul の最も内側にあり、外側の ID をカバーできるすべてのスタイルselector

3. 同じレイヤーに適用され、最後のレイヤーセレクターが同じであるかのように、レベルが高い方が優先されます: div ul li>div li

4.優先順位は全く同じです、後のスタイルは前のスタイルをカバーします

補足: 5. 優先順位アルゴリズム: style = 1000 (インラインスタイルシート) id = 100 (idセレクター) class = 10 (クラスセレクター) element = 1 (ラベルセレクター) 使用法: 同じレイヤで動作することが前提です。たとえば、#ul li{} と ul #li{} の優先度はどちらが高いですか? #ul li{} 優先度の値は次のように表されます。 101 (100+1)、後者の優先順位の値は 101 (1+100) なので、2 つのセレクターが同じレイヤー上で動作する必要があるという条件で、優先順位は同じになります

(3) をリンクする 3 つの方法スタイルシートをインポートするにはスタイルシート

1. インラインスタイルシート：スタイル属性を介してHTMLタグ内に記述され、最優先ですが、HTMLコードとCSSコードを組み合わせます CSS標準の「コンテンツの分離」には準拠していませんとスタイル」を作成し、後のメンテナンスは利用しません

2.内部スタイルシート：headのサブタグスタイルに記述されており、内容とスタイルの分離はある程度実現されています。ただし、スタイルの再利用参照方法実装できません:

3. 外部スタイル シート: コンテンツとスタイルの分離を実現し、後のメンテナンスと再利用を容易にし、W3C 標準、最も優先度の低い参照に準拠します。 : を通じて head タグ内に追加import CSS style Sheets

注: 内部スタイルシートと import インポートの違い:

1) link タグは html タグですが、import はそうではありません

2) Link はさまざまなリソースにリンクでき、import はインポートのみ可能ですCSS スタイル シート

3) link タグは hmtl コードと css スタイルの間のブリッジとして機能し、css コードをリンクしますが、import は css スタイル シートをインポートし、ドキュメントが読み込まれるときに CSS ファイルを HMTL にインポートします。中

4 ) リンク方式は文書読み込み中にCSSスタイルをリンクする方法、インポートはHTML文書が完成した後にCSSスタイルをインポートする方法です

:cessry': リンクするためのリンクタグを選択

(4)擬似クラスセレクター:

セレクター名: 擬似クラス {}、擬似クラスラベルの状態、例: a:link{}: ラベル a label は方向のスタイルです。マウスが置かれたとき a タグが使用されたときに表示されるスタイル; a:active{}: マウスが a タグ上で押されたときに表示されるスタイル; a:visited{}: a タグが使用されたときに表示されるスタイル: a:first-chird {} は、タグに親コンテナがあり、親コンテナの下で選択される最初の子タグであることを意味します

さまざまな CSS セレクターとインポート スタイル シートの詳細な説明については、いくつかの疑似クラス セレクターについては、関連記事ネットの PHP 中国語に注意してください。