-
CSS選擇器常見的有幾種?
- 標簽選擇器
- id選擇器
- class選擇器
- 偽類選擇器
- 組合選擇器
- 通配符選擇器
-
選擇器的優(yōu)先級是怎樣的?
優(yōu)先級從上到下排列姨蝴。- !import
- 內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
class 和 id 的使用場景?
id：布局的時候使用，用于區(qū)分大的區(qū)塊
class：書寫結(jié)構(gòu)樣式時可以使用，相同結(jié)構(gòu)的模塊可以用一個class名，增加樣式復(fù)用率。使用CSS選擇器時為什么要劃定適當?shù)拿臻g？
提高代碼可讀性倒慧，也方便團隊的協(xié)作和維護，避免與別人重復(fù)包券。讓瀏覽器更方便的解析纫谅，避免各瀏覽器渲染不一致。以下選擇器分別是什么意思?
#header{
/*選擇id名為header的元素*/
}
.header{
/*選擇class名為header的元素*/
}
.header .logo{
/*選擇class名為header的元素的子元素class為logo的元素*/
}
.header.mobile{
/*選擇class名為header和mobile的元素*/
}
.header p, .header h3{
/*選擇class名為header下的p標簽元素和class名為header下的h3標簽元素*/
}
#header .nav>li{
/*選擇id名為header下的class名為nav的子元素下的子元素li*/
}
#header a:hover{
/*給id名為header下的a標簽元素添加鼠標懸停時的效果樣式*/
}
- 列出你知道的偽類選擇器
- E:first-child 匹配元素E的第一個子元素
- E:link 匹配所有未被點擊的鏈接
- E:visited 匹配所有已被點擊的鏈接
- E:active 匹配鼠標已經(jīng)其上按下溅固、還沒有釋放的E元素
- E:hover 匹配鼠標懸停其上的E元素
- E:focus 匹配獲得當前焦點的E元素
- E:lang? 匹配lang屬性等于c的E元素
- E:enabled 匹配表單中可用的元素
- E:disabled 匹配表單中禁用的元素
- E:checked 匹配表單中被選中的radio或checkbox元素
- E::selection 匹配用戶當前選中的元素
- E:root 匹配文檔的根元素付秕，對于HTML文檔，就是HTML元素
- E:nth-child(n) 匹配其父元素的第n個子元素侍郭，第一個編號為1
- E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個子元素询吴，第一個編號為1
- E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
- E:nth-last-of-type(n) 與:nth-last-child() 作用類似亮元，但是僅匹配使用同種標簽的元素
- E:last-child 匹配父元素的最后一個子元素汰寓，等同于:nth-last-child(1)
- E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
- E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素苹粟，等同于:nth-last-of-type(1)
- E:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
- E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素跃闹，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
- E:empty 匹配一個不包含任何子元素的元素嵌削，文本節(jié)點也被看作子元素
- E:not(selector) 匹配不符合當前選擇器的任何元素
- :first-child和:first-of-type的作用和區(qū)別
first-child:匹配父元素下的第一個子元素毛好。
first-of-type:匹配父元素下相同類型的子元素中的第一個。
- 運行如下代碼苛秕，解析下輸出樣式的原因肌访。
first-child選中了class為item1的第一個元素字體顏色為紅色。
first-of-type選中了class為item1的并且是同一種類元素的第一個元素背景色為藍色艇劫。 - text-align: center的作用是什么吼驶，作用在什么元素上？能讓什么元素水平居中
作用是居中店煞，作用在塊級元素上蟹演。 - 如果遇到一個屬性想知道兼容性，在哪查看?
http://caniuse.com/
