タスク7ジョブ

1、classとidの使用シーン?
classマッチングclassは、ページの一部の要素に共通の特徴があるなど、特定のクラスの要素を含む.個別に異なる場合はclassプロパティを追加します.ユニークならidと名付けます
2、CSSセレクタによくあるものは何種類ありますか.
1、ベースセレクタ2、コンビネーションセレクタ3、属性セレクタ4、擬似クラスセレクタ5、擬似要素セレクタ
3、セレクタの優先度はどうですか.複雑なシーンの優先度はどのように計算しますか?
idセレクタ>クラスセレクタ>擬似クラスセレクタ>プロパティセレクタ>ラベルセレクタ>ワイルドカードセレクタ複雑なシーンライン内のスタイルをaで表すidセレクタをbで示すクラスセレクタ、擬似クラスセレクタ、プロパティセレクタをbで示すラベルセレクタをdで表すどのセレクタがあるかを対応する上に1を加えます.例えば、test p.class 1とtest.class1.class 2の2つの比較は、まずbの値がいずれも1である場合、後者のcが2であり、前者のcが1であることを引き続き比較するので、後者の優先度は前者より高い.
4、a:link,a:hover,a:active,a:visitedの順番はどうですか.どうして?
a:link a:visited a:hover a:active a:visited後ろに書いたらa:hover a:activeが上書きされます
5、以下のセレクタはそれぞれどういう意味ですか.#header { }選択ページのidがヘッダの要素.header { }選択ページのclassがヘッダの要素.header .logo { }選択classがヘッダの中のclassがlogoの要素.header.mobile { }選択classがヘッダとmobileの要素.header p, .header h3 { } classがヘッダの下のすべてのpラベルとすべてのh 3ラベル要素に同じスタイル#header .nav>li { }選択idがヘッダの下のclassがnavの直接サブ要素のliラベル#header a:hover { } idがヘッダの下のリンクを選択し、サスペンション状態にスタイル#header .logo~p { }を追加し、idがヘッダの下を選択し、classがlogoの後の同級pラベルに一致する.#header input[type="text"] { } idがヘッダーの下にあるinputラベルタイプがtextの要素を選択
6、あなたが知っている偽クラスセレクタをリストする

E:first-child

E:link

E:hover

E:visited

E:active

E:checked

E::selected

E:fist-of-type

E:nth-of-type(2)

E:enabled

E:disabled

E:focus

7、div:first-child、div:first-of-type、div:first-childとdiv:first-of-typeの作用と区別
ここに書いてある
8、次のコードを実行して、出力スタイルの原因を解析します.

 

   
aa
   
bb
   
ccc
 

まず.item1:first-child { color: red; }は観察により発見する.item 1の親要素は同じclassがctのdiv要素で、この親要素の下の最初の要素はpラベルで、同時にclassはitem 1なのでaaを赤くします.その後.item1:first-of-type{ background: blue; }まず aaの親要素はclassがctのdiv要素で、この親要素の下はp表札の1つだけで、同時にclassもitem 1なのでaaの背景色は青になりました.次に

bb

の親要素がclassがctのdiv要素で、この親要素の下にh 3ラベルが2つあるのを見て、私たちは第1のh 3ラベルを取って、このh 3のラベルのclasはちょうどitem 1なので、bbの背景色は青です.最後の

ccc

の親要素は同じで、この親要素の下のh 3ラベルは、2つあり、1つ目を取りますが、このh 3のラベルはちょうどitem 1なので、bbの背景色は青です.その結果aa,bbの背景色は青色であった.