class 和 id 的使用場景?

id對應(yīng)css是用樣式選擇符“#”磨德，只能被一個元素調(diào)用苔悦，id適用于定義結(jié)構(gòu)和大的板塊枷邪。
class對應(yīng)css是用樣式選擇符“.”珍德，可以用于被多個元素調(diào)用蚤告，重復(fù)引用樣式努酸，使用class。

CSS選擇器常見的有幾種?

1. 基礎(chǔ)選擇器

2. 組合選擇器

3. 屬性選擇器

4. 偽類選擇器

5. 偽元素選擇器

選擇器的優(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. 瀏覽器自定義
   行內(nèi)樣式 <div style="xxx"></div> ==> a
   ID 選擇器 ==> b
   類拜银，屬性選擇器和偽類選擇器 ==> c
   標(biāo)簽選擇器殊鞭、偽元素 ==> d
   比較相同級別a、b尼桶、c操灿、d的數(shù)量。a的值大泵督，則優(yōu)先級高趾盐，如果a的值相同，則b的值大的優(yōu)先級高小腊，以此類推救鲤。

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

1. a:link
2. a:visited
3. a:hover
4. a:active

• link:連接平常的狀態(tài)
• visited:連接被訪問過之后
• hover:鼠標(biāo)放到連接上的時候
• active:連接被按下的時候
  按照平時點擊鼠標(biāo)的順序應(yīng)該是a:link, a:hover, a:active, a:visited本缠，但由于相同優(yōu)先級別的選擇器，后面的樣式會覆蓋前面的樣式入问。當(dāng)點擊完鼠標(biāo)后丹锹，a:visited的樣式會一直存在，覆蓋掉前面的樣式芬失，所以要使a:hover,和a:active的樣式不被覆蓋楣黍，要將a:visited放在a:hover,和a:active的前面。

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

#header{
}

匹配id="header"的元素

.header{
}

匹配class="header"的元素

.header .logo{
}

匹配class="header"的所有后代中class="logo"的元素

.header.mobile{
}

匹配class="header"并且class="mobile"的元素

.header p, .header h3{
}

匹配class="header"中所有后代p元素和h3元素

#header .nav>li{
}

匹配id="header"中所有后代nav元素中的子元素li元素

#header  a.hover{
}

匹配id="header"中所有后代中鼠標(biāo)處于hover狀態(tài)的a元素

#header  .logo~p{
}

匹配id="header"中所有后代class="logo"元素后面的同級p元素

#header  input[type="text"]{
}

匹配id="header"中所有后代中input標(biāo)簽type="text"的元素

列出你知道的偽類選擇器

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

• div:first-child：匹配div的父元素下的第一個div子元素
• div:first-of-type：匹配div的父元素下第一個div子元素類型的每個元素
• div :first-child：匹配div下的第一個子元素
• div :first-of-type匹配div下的同類型的第一個元素

運行如下代碼霉颠，解析下輸出樣式的原因对碌。

結(jié)果如圖：

代碼中有兩個樣式：

.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}

先解析第一個樣式

.item1:first-child{
  color: red;
}

匹配class="item1"的其父元素下的第一個元素，即class="ct"下面的第一個元素p元素蒿偎，所以aa為紅色朽们。
再解析第二個樣式：

.item1:first-of-type{
  background: blue;
}
匹配class="item1"的其父元素下的同類型的第一個元素，class="ct"下有兩種類型元素p元素和h3元素诉位，分別取第一個元素骑脱，所以aa和bb的背景色為藍色。