任務(wù)八

1胜茧、CSS選擇器常見的有幾種?

標(biāo)簽選擇器：直接將HTML標(biāo)簽作為選擇器臼婆，a {text-decoration: none;}
id選擇器：#nav {}
類選擇器：.content {}
群組選擇器：body,h2,p,table,th,td {}
后代選擇器（派生選擇器）：后代選擇器可以選擇某個(gè)元素的后代元素巢音，p em{}
子元素選擇器：h1 > em {}
屬性(值)選擇器：根據(jù)元素的屬性及屬性值選擇元素疗疟，[title] {}署鸡、a[href][title] {}如失、a[title="hunger"] {}
偽類選擇器：a:hover {}绊诲、p:last-child {}

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

在屬性后面使用 !important,會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式褪贵。
作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式掂之。
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義
總的來說，定位的越精準(zhǔn)脆丁，優(yōu)先級(jí)就越高世舰。優(yōu)先級(jí)高的樣式會(huì)覆蓋優(yōu)先級(jí)低的

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

id： id有標(biāo)識(shí)的功能槽卫，同一個(gè)ID在一個(gè)頁面中只能出現(xiàn)一次跟压，可以利用ID進(jìn)行頁面的宏觀布局；
class：class具有重復(fù)性歼培，用于結(jié)構(gòu)內(nèi)部樣式的設(shè)計(jì)震蒋。

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

使用語義化的命名可以使代碼容易讀懂
便于代碼管理和多人協(xié)作
瀏覽器可能會(huì)因?yàn)椴灰?guī)范的命名產(chǎn)生不同的樣式
提高頁面渲染速度

5查剖、以下選擇器分別是什么意思?

#header{}：選擇id名為header中的元素
.header{}：選擇header類中的元素
.header .logo{}：選擇header類中l(wèi)ogo類的元素
.header.mobile{}：選擇header類且mobile類的元素
.header p, .header h3{}：選擇header類中的p元素和header類中的h3元素
#header .nav>li{}：選擇id為header中nav類的直接子元素li
#header a:hover{}：選擇id為header的后代中所有a鏈接是懸停狀態(tài)的偽類選擇器

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

E:first-child：匹配元素E的第一個(gè)子元素
E:hover：匹配鼠標(biāo)懸停其上的E元素
E:active：匹配鼠標(biāo)已經(jīng)其上按下噪窘、還沒有釋放的E元素
E:checked：匹配表單中被選中的radio或checkbox元素
E:nth-child(n)：匹配其父元素的第n個(gè)子元素笋庄，第一個(gè)編號(hào)為1
E:nth-last-child(n)：匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1
E:nth-of-type(n)：與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n)：與:nth-last-child() 作用類似直砂，但是僅匹配使用同種標(biāo)簽的元素
E:last-child：匹配父元素的最后一個(gè)子元素菌仁，等同于:nth-last-child(1)
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è)子元素籍嘹，這個(gè)子元素可以是同種類型或不同類型的。
:first-of-type選擇某父元素下所有相同類型的子元素弯院，其中排第一的那個(gè)子元素辱士，也可以說是是父元素下相同類型子元素中的第一個(gè)。

Paste_Image.png

8听绳、運(yùn)行如下代碼颂碘，解析下輸出樣式的原因。

QQ截圖20160803065255.jpg

first child選擇的是父元素的第一個(gè)子元素椅挣，第一個(gè)子元素為p头岔，所以選擇aa
first-type-of選擇的是各類子元素的第一個(gè)，p元素的aa和h3元素的bb是第一個(gè)鼠证，所以選擇aa和bb峡竣。

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

text-aligen: center屬性作用在塊元素上，能讓塊元素里的文本荠列、行內(nèi)元素类浪、圖片居中顯示。