1.class選擇器和id選擇器的使用場景
class選擇器為類選擇器，同一個標簽可以有多個類且一個類可以多次被調用，多用于多個標簽樣式相同或相似的時候。
ID選擇器：同一個標簽僅能有一個id選擇器，且同一個id選擇器僅能使用一次，優先級要高于class選擇器。
2.常見的選擇器有哪幾種？
id選擇器，以#命名，例如 #header ,表示名為header的id選擇器。
類選擇器，以.命名，例如.header,表示名為header的類選擇器。
標簽選擇器，以html標簽命名，例如p{},表示p標簽的樣式。
通用選擇器，以*{},表示html所有的元素樣式。
組合選擇器：
-
偽類選擇器，常見a:hover。
常見偽類元素
- 屬性選擇器，常見形式E[attr]，匹配屬性為attr的所有E元素，權值暫為c.
*偽元素選擇器：
3.選擇器的優先級及復雜情況下優先級計算。
!important優先級最高，會覆蓋掉所有選擇器。
內聯式次之，權值暫設為a。
id選擇器次之，權值暫設為b。
類選擇器，偽類選擇器，屬性選擇器再次之，權值暫設為c。
標簽選擇器，偽元素選擇器最次，權值暫設為d。
- 復雜情況下，可以通過計算其權值a+b+c+d，同位才可數學相加，比較權值大小來確定優先級。
舉個例子：
#header p>.abc和 #header .abc.def
都有一個id選擇器，b=1,前者有一個類選擇器，c=1，后者有兩個類選擇器，c=2，所有，#header .abc.def的優先級高于前者。
權值相同的，后面的選擇器會覆蓋前面選擇器的效果。
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
順序是：
a:link
a:visited
a:hover
a:active
-
為什么?
因為這四個選擇器，都有一個偽類選擇器，一個標簽選擇器，所以，權值相同，在后面的會覆蓋前面的效果。
未點擊狀態下，顯示的是a:link效果，點擊過后，頁面會展示a:visited的效果，點擊過后，再劃過會顯示a:hover效果，無論什么時候點擊狀態下都會顯示為a:active效果。這是我們期望的發生的。
假如a:visited放在a:hover之后，那么，只要點擊過這個鏈接，鼠標滑過不會有效果，點擊狀態下，：active會有相應的效果。這是因為a:visited的會覆蓋掉滑過的效果。假如，a:visited放在最后，那么無論你滑過鼠標，還是點擊他，只會有visited的效果。因為后面的效果會覆蓋前面的效果。
再假如
a:link;
a:visited;
a:active;
a:hover;
效果就是你只要鼠標劃上去，無論你點擊與否，都只有:hover的效果。
5.以下選擇器上面意思？
\#header {} // 名字為header的id選擇器
\.header {} //名字為header的類選擇器
\.header .logo {} //header選擇器下的所有.logo元素
\.header.mobile {} //既有header又有mobile的元素
\.header p, .header h3 {} //header選擇器下的p標簽的元素，和 header下的h3標簽的元素
\#header .nav>li {} //名為header的id選擇器下的 nav 類里面的第一代li元素。
\#header a:hover {} //名為header的id選擇器下的a:hover元素
\#header .logo~p {} //名為header的id選擇器下的 .logo選擇器之后的相鄰p元素，且不論是不是直接相鄰。
\#header input[type="text"] //名為header的id選擇器下的所有input且input的type屬性為text的元素。
6.我所知道的偽類選擇器。
- a:hover 鼠標滑過時的a標簽樣式
- a:visited 鼠標點擊過后的a標簽樣式
- a:link所有未被點擊的a連接。
- a:active 點擊狀態下a標簽的樣式。
- E:first-child 父元素中的第一個是E選擇器的元素
- E:last-child 父元素的最后一個是E選擇器的元素
- E:nth-last-child(n) 父元素的倒數第n個是且只能是E選擇器的元素。
- E:nth-child(n) 父元素的第n個是且只能是E選擇器的元素。
- E:first-of-type 父元素下的使用同種標簽第一個有E選擇器的元素。
- E:nth-last-of-type(n) 父元素下使用同種標簽的有E選擇器的倒數第n個元素
7.div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）。
- div:first-child //父容器下第一個且只能是DIV的元素
- div:first-of-type //父容器下的第一個DIV元素。
- div :first-child //div下的第一個子元素。
- div :first-of-type //div下的同種標簽的第一個元素。
8.運行代碼解釋原因
-
原因分析：
.item1:first-child{} 選中父元素下第一個元素是.item選擇器的元素。所以選擇到了<p>標簽的元素。.item:first-of-type{} 選中父元素下同種標簽中第一個使用.item選擇器的元素，所以選擇到了
<p>和第一個<h3>標簽。
