class 和 id 的使用場景?

1. 在CSS文件里書寫時，ID加前綴"#"骤星；CLASS用"."
2. id一個頁面只可以使用一次跃巡；class可以多次引用。
3. ID是一個標(biāo)簽什猖，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容票彪，就象名字红淡，如果一個屋子有2個人同名，就會出現(xiàn)混淆降铸；class是一個樣式在旱，可以套在任何結(jié)構(gòu)和內(nèi)容上，就象一件衣服推掸；
4. 從概念上說就是不一樣的：id是先找到結(jié)構(gòu)/內(nèi)容桶蝎，再給它定義樣式；class是先定義好一種樣式谅畅，再套給多個結(jié)構(gòu)/內(nèi)容俊嗽。

目前的瀏覽器還都允許用多個相同ID，一般情況下也能正常顯示铃彰，不過當(dāng)你需要用JavaScript通過id來控制div時就會出現(xiàn)錯誤。

CSS選擇器常見的有幾種?

基礎(chǔ)選擇器

組合選擇器

屬性選擇器

偽類選擇器

偽元素選擇器

選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級？

從高到低分別是

1.在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義

復(fù)雜場景如何計算優(yōu)先級

行內(nèi)樣式 <div style="xxx"></div> ==> a
ID選擇器 ==> b
類琐脏，屬性選擇器和偽類選擇器 ==> c
標(biāo)簽選擇器攒砖、偽元素 ==> d

小測試

a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么日裙？

“愛恨原則”（LoVe/HAte）吹艇，即四種偽類的首字母:LVHA。
正確的順序：a:link昂拂、a:visited受神、a:hover、a:active

• a:link格侯，定義正常鏈接的樣式鼻听；
• a:visited，定義已訪問過鏈接的樣式联四；
• a:hover撑碴，定義鼠標(biāo)懸浮在鏈接上時的樣式；
• a:active朝墩，定義鼠標(biāo)點擊鏈接時的樣式醉拓。

為了符合瀏覽器解釋CSS遵循的"就近原則"。我們在定義CSS中收苏，宜將最一般的條件放在最上面亿卤，并依次向下，最下面放最特殊的鹿霸。

在W3C規(guī)范中怠噪，也規(guī)定了鏈接的聲明順序：
在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后杜跷，才是有效的傍念。
在 CSS 定義中，a:active 必須被置于 a:hover 之后葛闷，才是有效的憋槐。

以下選擇器分別是什么意思?

#header{
}
//"id=header"的樣式
------------------------------
.header{
}
//"class=header"的樣式
------------------------------------
.header .logo{
}
//定義"class=header"下所有的"class=logo"的樣式
--------------------------------------------------
.header.mobile{
}
//"class=header mobile"的元素
-----------------------------------------
.header p, .header h3{
}
//選擇"class=header"下的p元素和h3元素
---------------------------------------------
#header .nav>li{
}
//選擇"di=header"下"class=nav"元素下的直接子元素 li
-----------------------------
#header a:hover{
}
// 選擇"id=header"元素下的a標(biāo)簽，鼠標(biāo)經(jīng)過時的效果
-----------------------
#header .logo~p{
}
//選擇"id=header"下的"class=logo"的所有同級p元素(不包括.logo)
---------------------------------------
#header input[type="text"]{
}
//選擇"id=header"下的 input

列出你知道的偽類選擇器

a:link淑趾，定義正常鏈接的樣式阳仔；
a:visited，定義已訪問過鏈接的樣式；
a:hover近范，定義鼠標(biāo)懸浮在鏈接上時的樣式嘶摊；
a:active，定義鼠標(biāo)點擊鏈接時的樣式评矩。

div:first-child叶堆、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）

div:first-child 匹配父元素下斥杜，第一個子元素
div:first-of-type 匹配父元素的子元素中虱颗，第一個div元素
div :first-child div作為父元素，首個子元素
div :first-of-type div元素的后代元素中首個同類型的元素

運行如下代碼蔗喂，解析下輸出樣式的原因忘渔。

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>
//輸出

輸出結(jié)果

.item1:first-child {color: red;} 定義item1第一個標(biāo)簽為紅色
.item1:first-of-type {background: blue;} 定義item1不同類型的第一個標(biāo)簽，背景為藍(lán)色