知っておくべきCSSセレクター

セレクターとは：

各cssスタイル定義は2つの部分で構成され、形式は次のとおりです。

[code] 选择器{
样式;
}

[/ code] {}の前の部分は「セレクター」です。「セレクター」は、{}の「スタイル」のオブジェクト、つまり「スタイル」が作用するWebページの要素を指定します。

ベースセレクター

タグセレクター（タグ名を選択）：完全なHTMLページは多くの異なるタグで構成され、タグセレクターは対応するCSSスタイルを使用するタグを決定します
。

p{
color:#900;
font-size:12px;
background:#090;
}

IDセレクター（## + ID名）：IDセレクターは、特定のIDでマークされたHTML要素の特定のスタイルを指定できます。要素は、一意の要素IDに基づいて選択されます。つまり、同じIDは同じドキュメントページに1回しか表示されません。

といった：

#demoDiv{
color:#FF0000;
}

クラスセレクター（。+クラス名）：クラスセレクターはクラス名に従って選択され、前に「。」が付いています。

といった：

.demoDiv{
color:blue;
}

ユニバーサルセレクタ（すべての要素を選択）：ユニバーサルセレクタは、*で表され、
例えば：

* {
color:green;
font-size: 12px;
}

グループセレクター：複数の要素が同じスタイル属性を持っている場合、コンマで区切って宣言を一緒に呼び出すことができます。
例：

p,h1,span{
color:red;
line-height:20px;
}

#main p, #sider span {
color:#000;
line-height:26px;
}

グループセレクターを使用すると、CSSコードが大幅に簡素化されます。同じ属性を持つ複数の要素を組み合わせて選択し、同じCSS属性を定義します。これにより、コーディング効率が大幅に向上し、CSSファイルの量が削減されます。

階層セレクター

子セレクター（使用>要素間分割）：子セレクター（子セレクター）は、その直接の子孫を指します。これは、子要素に作用する最初の子孫として理解できます
。

p>span{
color:red;
}

子孫セレクター（要素間のスペースで区切られます）：特定の要素または要素グループの子孫を選択し、親要素の選択を前に置き、子要素の選択を後ろに置き、スペースで区切るために使用されます真ん中に
：

section span{
color:blue;
}

子セレクターと子孫セレクターの違い： 1）子セレクター（子セレクター）はその直接の子孫のみを参照し、子孫セレクターはすべての子子孫要素に作用します
。2）子セレクターは ">" Selectを介して実行され、子孫セレクターは選択するスペース。

ブラザーセレクター（要素間で+で区切られています）：上記のサブセレクターと子孫セレクターに加えて、見出しh1要素とそれに続く2つの段落p要素など、2つの兄弟のうちの1つを検索することもできます。最初の段落のp要素を見つけて、それにスタイルを適用します。次の
ような隣接する兄弟セレクターを使用できます。

h1 + p {
color:blue;
}

疑似クラスセレクター

疑似クラスは、一部のフォーム要素と同様にリンクタグに適用できますが、フォーム要素の適用はIEでサポートされていないため、通常、疑似クラスはリンクスタイルにのみ適用されます。

動的疑似クラスセレクター動的疑似セレクター
の書き込み順序：
1）リンクと訪問先を最初に配置する必要があります（順序なし、静的疑似クラスセレクター）;
2）リンクと訪問先はタグにのみ使用できます;
3）リンクそして訪問は焦点です
4）焦点はホバーです;
5）ホバーはアクティブです;
構造的疑似クラスセレクターの
最初の子：最初の要素。
last-child：最後の要素。
nth-child（n）：特定の要素の数を選択する場合、nは値を取ります。
nth-child（-n + m）：選択された最初のm個の要素のnの初期値は0です。
nth-of-type（n）：n番目の要素を選択します。
nth-last-child（n）：下からn番目の要素を選択します。
負の疑似クラスセレクター
要素名：not（n）特定の要素に加えて、他の要素がスタイルを追加します

疑似要素セレクター：

すべての疑似要素セレクターは、疑似要素が表示されるセレクターの最後に配置する必要があります。つまり、疑似要素セレクターの後に派生セレクターを続けることはできません。

：first-letter、ブロック要素の最初の文字スタイルを設定します。インライン要素からブロック要素およびインラインブロック要素への変換もサポートされています。

div p:first-letter {
font-size: 20px
}
//选择div元素里所有的p元素的第一个字母或汉字;

：first-line：最初のテキスト行のスタイルを設定します。

.box .main:first-line {
color: #f00
} 
　//只有部分属性允许first-line：所有font属性、color、所有background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height

：before：前のスタイルを設定し、生成されたコンテンツを挿入して、そのスタイルを設定できます。

body:before {
content: 'The Start:'; 
display: block;
}
//在body元素前插入文本内容'The Start:'，并设置其为块元素

：after：スタイルを設定した後、生成されたコンテンツを挿入してそのスタイルを設定できます。
例：

body:after {
content: 'The End.';
display: block;
}
//在body元素最后插入文本内容'The End.'，并设置其为块元素

input ::-webkit-input-placeholder（入力ボックスのプロンプト情報スタイルを変更します）

属性セレクター

マッチングは要素の属性に基づいており、その属性は標準属性またはカスタム属性にすることができます。同時に複数の属性を照合することもできます。

形式：要素名[属性名+ "属性値"]

input[type=“text”]

形式：要素名[属性名^ =属性値で始まるコンテンツ]
XXXで始まる要素を選択します

input[type^=“te”]+span{ 
color:red;
}

形式：要素名[属性名$ =属性値で終わるコンテンツ]
XXXで終わる要素を選択します

input[type $ =“d”]+span{
 color:blue;
}

形式：要素名[属性名* =属性値に含まれるコンテンツ]
XXXを含む要素を選択します

input[type*=“i”]+span{ 
color:green;
}

結論：Webフロントエンドを学びたい友人、およびフロントエンド情報が必要な友人は、ここで学習スカートに参加できます。フロント：953、ミドル：352、そして最後に：883、白人から大物まですべてがいます。スカート、フロントエンドの学習情報、フロントエンドの面接の質問のPDFファイル、自由に共有、表示、または離れることができます。