問(wèn)答

1. CSS選擇器常見(jiàn)的有幾種?

答：

• 基礎(chǔ)選擇器

#id id選擇器，匹配特定id的元素
.class class選擇器，匹配包含class類(lèi)名的元素
* 通配符選擇器，匹配了頁(yè)面任何元素
element 標(biāo)簽選擇器，匹配頁(yè)面元素標(biāo)簽

• 組合選擇器

E,F 分組選擇器，可以設(shè)置E和F相同的樣式
E F 后代選擇器，設(shè)置E元素后的所有F元素的樣式
E>F 子元素選擇器，可以設(shè)置E元素后直接的F元素樣式
E+F 近鄰元素選擇器，可以設(shè)置E元素后近鄰的F元素樣式
E~F 相鄰元素選擇器，可以設(shè)置E元素后同鄰的F元素樣式

• 屬性選擇器（大多數(shù)用于匹配表單的空間元素，可以不用反復(fù)添加樣式來(lái)匹配）

E[attr=value] 設(shè)置屬性attr是value的元素樣式

• 偽類(lèi)選擇器

E:hover 改變E元素的懸停效果

• 偽元素選擇器

E::before 在E元素之前插入生成的元素
E::after 在E元素之后插入生成的元素

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

答：

優(yōu)先級(jí)從高到低排列

• !import
• style屬性
• id選擇器
• class選擇器
• 偽類(lèi)選擇器
• 屬性選擇器
• 標(biāo)簽選擇器
• 通配符
• 瀏覽器自定義
  注： 優(yōu)先級(jí)相同的情況下，后面的樣式優(yōu)先于之前的設(shè)置。

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

答：

• class 的類(lèi)名用于同一類(lèi)型并且擁有共同特性的模塊，同一個(gè)元素可以擁有多個(gè)class 類(lèi)名
• id 擁有獨(dú)一無(wú)二的樣式，用于劃分大區(qū)塊

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

答：

• 應(yīng)用于展現(xiàn)網(wǎng)頁(yè)整體的清晰結(jié)構(gòu)，便于開(kāi)發(fā)者閱讀與重構(gòu)

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

答：

header{}

.header{}
.header .logo{}
.header.mobile{}
.header p, .header h3{}

header .nav>li{}

header a:hover{}

* ```#header``` 設(shè)置```id="header"``` 的元素樣式
* ```.header``` 設(shè)置```class="header"``` 的元素樣式
* ```.header .logo``` 設(shè)置```class="header"```元素下?lián)碛衊``class="logo"``` 的元素樣式
* ```.header.mobile``` 設(shè)置```class="header mobile"``` 的元素樣式
* ```.header p, .header h3{}``` 同時(shí)設(shè)置```class="header"``` 下的```p``` 元素和```h3``` 元素樣式
* ```#header .nav>li{}``` 設(shè)置```id="header"``` 下```class="nav"```的子元素```li``` 的元素樣式（而非后代元素）
* ```#header a:hover``` 設(shè)置```id="header"``` 下```a``` 元素的鼠標(biāo)懸停效果

### 6. 列出你知道的偽類(lèi)選擇器
#### 答：
* ```
E:hover // 鼠標(biāo)懸停狀態(tài)
E:active // 鼠標(biāo)按下沒(méi)有釋放的狀態(tài)
E:focus // 獲得焦點(diǎn)的狀態(tài)
E:empty // 匹配一個(gè)不包含任何子元素的元素
E:checked // 匹配表單中被默認(rèn)選中的radio或checkbox元素
E:first-child // 匹配父元素中的第一個(gè)子元素E，如果沒(méi)有找到，設(shè)置樣式就無(wú)效。
E:first-of-type // 匹配父元素中相同類(lèi)型元素E的第一個(gè)子元素

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

答：

• :first-child 是匹配父元素中的第一個(gè)子元素，如果沒(méi)有找到，設(shè)置的樣式就無(wú)效。

<style>
        p:first-child{
                color: blue;
        }
        h1:first-child{
                color: blue;
        }
        span:first-child{
                color: blue;
        }
</style>
<div>
        <!-- 這樣設(shè)置的p元素的字體顏色顯示藍(lán)色，其他設(shè)置無(wú)效，因?yàn)閔1和span不是父元素的第一個(gè)子元素-->
        <p>我是第一個(gè)P元素</p>
        <h1>我是第一個(gè)h1元素</h1>
        <span>我是第一個(gè)span元素</span>
</div>

預(yù)覽代碼

• :first-of-type 是匹配父元素中相同類(lèi)型的第一個(gè)子元素，并不一定是父元素中的第一個(gè)子元素。

<style>
        p:first-of-type{
                color: blue;
        }
        h1:first-of-type{
                color: blue;
        }
        span:first-of-type{
                color: blue;
        }
</style>
<div>
        <!-- 這樣設(shè)置的p,h1,span元素的字體顏色都顯示藍(lán)色-->
        <p>我是第一個(gè)P元素</p>
        <h1>我是第一個(gè)h1元素</h1>
        <span>我是第一個(gè)span元素</span>
</div>

預(yù)覽代碼

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>

答：

• .item1:first-child 會(huì)找到 class="ct"的 div元素下的第一個(gè)子元素，所以p 標(biāo)簽下的aa的文字顏色為紅色。
• .item1:first-of-type會(huì)找到class="ct"的div元素下的同類(lèi)型元素的第一個(gè)子元素，所以p 和h3標(biāo)簽下的第一個(gè)子元素的背景色為藍(lán)色，所以包含aa文本的p標(biāo)簽背景顏色為藍(lán)色，包含bb文本的h3標(biāo)簽背景顏色為藍(lán)色。

預(yù)覽代碼

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

答：

• 作用于塊級(jí)元素，語(yǔ)義上是讓文本顯示居中，實(shí)際運(yùn)用中，可以讓塊級(jí)元素中的內(nèi)聯(lián)元素水平居中。

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

答：

• 可以通過(guò)caniuse網(wǎng)站查詢(xún)CSS屬性兼容性