任務(wù)八

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

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

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

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

3、class 和 id 的使用場景?

id: id有標(biāo)識的功能,同一個ID在一個頁面中只能出現(xiàn)一次,可以利用ID進行頁面的宏觀布局;
class:class具有重復(fù)性,用于結(jié)構(gòu)內(nèi)部樣式的設(shè)計。

4、使用CSS選擇器時為什么要劃定適當(dāng)?shù)拿臻g?

使用語義化的命名可以使代碼容易讀懂
便于代碼管理和多人協(xié)作
瀏覽器可能會因為不規(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的第一個子元素
E:hover:匹配鼠標(biāo)懸停其上的E元素
E:active:匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
E:checked:匹配表單中被選中的radio或checkbox元素
E:nth-child(n):匹配其父元素的第n個子元素,第一個編號為1
E:nth-last-child(n):匹配其父元素的倒數(shù)第n個子元素,第一個編號為1
E:nth-of-type(n):與:nth-child()作用類似,但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n):與:nth-last-child() 作用類似,但是僅匹配使用同種標(biāo)簽的元素
E:last-child:匹配父元素的最后一個子元素,等同于:nth-last-child(1)
E:first-of-type:匹配父元素下使用同種標(biāo)簽的第一個子元素,等同于:nth-of-type(1)
E:last-of-type:匹配父元素下使用同種標(biāo)簽的最后一個子元素,等同于:nth-last-of-type(1)

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

:first-child選擇某父元素下第一個子元素,也可以說是結(jié)構(gòu)上的第一個子元素,這個子元素可以是同種類型或不同類型的。
:first-of-type選擇某父元素下所有相同類型的子元素,其中排第一的那個子元素,也可以說是是父元素下相同類型子元素中的第一個。

Paste_Image.png
Paste_Image.png

8、運行如下代碼,解析下輸出樣式的原因。

QQ截圖20160803065255.jpg

first child選擇的是父元素的第一個子元素,第一個子元素為p,所以選擇aa
first-type-of選擇的是各類子元素的第一個,p元素的aa和h3元素的bb是第一個,所以選擇aa和bb。

9、text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中

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

Paste_Image.png

10、如果遇到一個屬性想知道兼容性,在哪查看?

http://caniuse.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、CSS選擇器常見的有幾種? 基本選擇器 通配選擇器~選擇文檔中所有的html元素,用一個*表示 元素選擇器~選...
    dengpan閱讀 1,030評論 0 3
  • 1.CSS選擇器常見的有幾種? 1).基本選擇器: 通配選擇器~選擇文檔中所有的html元素,用一個*表示 元素選...
    Lily的夏天閱讀 432評論 0 0
  • 1、class 和 id 的使用場景? 2、CSS選擇器常見的有幾種? 3、選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如...
  • 1.CSS選擇器常見的有幾種? 答: 1.基本選擇器 ①Elements-標(biāo)簽選擇器:直接在標(biāo)簽上面設(shè)置樣式,例如...
    呦泥酷閱讀 466評論 0 0
  • 前幾天,有兩個讀者找我咨詢:加入了社團,但發(fā)現(xiàn)跟自己想的完全不一樣,要不要退團? 每年九月,大一新生都會被洗腦,要...
    山僧掃雨閱讀 820評論 11 21

友情鏈接更多精彩內(nèi)容