1.CSS選擇器常見的有幾種?

• 基礎(chǔ)選擇器

* {
    font-family: '微軟雅黑';
}

#id-selector{
    color: #333;
}

.class-selector{
    background: #f1f1f1;
}

p {
    height: 50px;
    line-height: 50px;
}

• 組合選擇器

• 屬性選擇器
  屬性選擇器可以根據(jù)某個(gè)屬性是否存在或?qū)傩缘闹祵ふ以?，以此來?shí)現(xiàn)功能
  例如：input[type='text']，設(shè)置input標(biāo)簽的樣式，不用另外增加class名

• 偽類選擇器
  有時(shí)候，我們需要根據(jù)文檔結(jié)構(gòu)之外的其他條件對(duì)元素應(yīng)用樣式，例如表單元素或鏈接的狀態(tài)，此時(shí)使用偽類選擇器完成

• 偽元素選擇器

偽類和偽元素的根本區(qū)別在于：它們是否創(chuàng)造了新的元素(抽象)。從我們模仿其意義的角度來看，如果需要添加新元素加以標(biāo)識(shí)的，就是偽元素，反之，如果只需要在既有元素上添加類別的，就是偽類。而這也是為什么，標(biāo)準(zhǔn)精確地使用 “create” 一詞來解釋偽元素，而使用 “classify” 一詞來解釋偽類的原因。一個(gè)描述的是新創(chuàng)建出來的“幽靈”元素，另一個(gè)則是描述已經(jīng)存在的符合“幽靈”類別的元素。

偽類一開始單單只是用來表示一些元素的動(dòng)態(tài)狀態(tài)，典型的就是鏈接的各個(gè)狀態(tài)(LVHA)。隨后CSS2標(biāo)準(zhǔn)擴(kuò)展了其概念范圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標(biāo)識(shí)的“幽靈”分類。
偽元素則代表了某個(gè)元素的子元素，這個(gè)子元素雖然在邏輯上存在，但卻并不實(shí)際存在于文檔樹中。

2.選擇器的優(yōu)先級(jí)是怎樣的?

具有更特殊選擇器的規(guī)則優(yōu)先于具有一般選擇器的規(guī)則，如果兩個(gè)規(guī)則特殊性相同，那么后定義的規(guī)則優(yōu)先。

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

3.class 和 id 的使用場(chǎng)景?

使用class標(biāo)簽標(biāo)示頁面類型，使用ID標(biāo)示特定頁面，可以靈活控制站點(diǎn)的設(shè)計(jì)和布局

4.使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g？

主要是為了使自己定義的樣式只對(duì)當(dāng)前區(qū)塊生效，避免與他人產(chǎn)生沖突

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

1.#header{} ——選取id=header的標(biāo)簽為其添加樣式
2..header{}——選取class=header的標(biāo)簽為其添加樣式
3..header .logo{}——選取class=header的標(biāo)簽后代中 class="logo"的標(biāo)簽為其添加樣式
4..header.mobile{}——選擇class=header和mobile的元素
5..header p, .header h3{}——選擇class=header標(biāo)簽中后代為p和h3的元素
6.#header .nav>li{}——選取id=header的元素后代中class為nav元素的直接后代li元素
7.#header a:hover{}——選取id=header的元素后代中a元素為其添加鼠標(biāo)懸停時(shí)的樣式.

6.列出你知道的偽類選擇器

E:first-child ——匹配元素E的第一個(gè)子元素
E:link ——匹配所有未被點(diǎn)擊的鏈接
E:visited ——匹配所有已被點(diǎn)擊的鏈接
E:active ——匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
E:hover ——匹配鼠標(biāo)懸停其上的E元素
E:focus ——匹配獲得當(dāng)前焦點(diǎn)的E元素
E:checked ——匹配表單中被選中的radio或checkbox元素
E:first-of-type ——匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)
E:last-of-type ——匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)

7.:first-child和:first-of-type的作用和區(qū)別

• :first-child匹配的是某父元素的第一個(gè)子元素，可以說是結(jié)構(gòu)上的第一個(gè)子元素,示例中顯示，即使是嵌套關(guān)系下的第一個(gè)子元素，也是會(huì)被匹配。
• :first-of-type匹配的是某父元素下相同類型子元素中的第一個(gè)，不限制是第一個(gè)子元素，只要是該類型元素的第一個(gè)就可以。

8.運(yùn)行如下代碼，解析下輸出樣式的原因。

<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>

9.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中

text-align: center——讓塊級(jí)元素內(nèi)部的行內(nèi)元素（如文本和圖片）水平居中。

10.如果遇到一個(gè)屬性想知道兼容性，在哪查看?

在caniuse上查看