1.CSS選擇器常見的有幾種?
詳情請(qǐng)見teren的技術(shù)博客:CSS選擇器與優(yōu)先級(jí)淺析
2.選擇器的優(yōu)先級(jí)是怎樣的?
詳情請(qǐng)見teren的技術(shù)博客:CSS選擇器與優(yōu)先級(jí)淺析
3.class 和 id 的使用場(chǎng)景?
id作為匹配元素的唯一標(biāo)識(shí)，常用來進(jìn)行頁面的宏觀布局和設(shè)計(jì)包含塊；
class作為匹配一類元素的標(biāo)識(shí)，常用來進(jìn)行頁面的區(qū)塊設(shè)計(jì)，具體演示效果如下：
更多介紹，請(qǐng)見teren的技術(shù)博客:來找茬——class和id兩位孿生兄弟
4.使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g？
詳情請(qǐng)見技術(shù)博客：精簡(jiǎn)的CSS命名規(guī)則
5.以下選擇器分別是什么意思?
- ＃header匹配所有id="header"的元素
- .header匹配所有class="header"的元素
- 匹配所有父元素的class="header"，后代元素的class="logo"的元素
- 匹配同時(shí)具備class="header"和class="mobile"的所有元素
- 匹配所有class="header"的后代元素為p的元素，或是所有class="header"的后代元素為h3的元素
- 匹配所有id="header"，后代元素的class="nav"且其所有子元素為li的元素
- 匹配所有id="header",后代元素為a標(biāo)簽的鼠標(biāo)懸浮動(dòng)作
6.列出你知道的偽類選擇器
| 選擇器 | 含義 | 實(shí)例 |
|---|---|---|
E:first-child |
匹配父元素E下的第一個(gè)子元素 | div:first-child{text-align:center;} |
| 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:lang(c) | 匹配lang屬性等于c的E元素 |
7.:first-child和:first-of-type的作用和區(qū)別
:first-child匹配的是父元素下的第一個(gè)子元素，而:first-of-type匹配的是父元素下相同類型子元素的第一個(gè)元素，具體演示效果如下：
p:first-child匹配到的是div下的第一個(gè)子元素p，第二個(gè)子元素p不會(huì)顯示樣式；
h1和span都不是div下的第一個(gè)子元素，也不會(huì)顯示樣式；
span：first-of-type匹配的是div下的相同類型的子元素span的第一個(gè)元素，而第二個(gè)元素span不會(huì)顯示樣式
由此我們可知，first-
child和first-of-type的區(qū)別：
- first-child匹配父元素的第一個(gè)子元素，而不是同類子元素下的第一個(gè)；
- first-of-type匹配父元素下同類子元素的第一個(gè)。
8.運(yùn)行如下代碼，解析下輸出樣式的原因。
以上代碼具體演示效果如下：
- 第一個(gè)樣式.item1:first-of-type匹配父元素下的同類子元素的第一個(gè)，具體到該代碼就是
- body父元素下的同類子元素，即第一行的item1,內(nèi)容為111有樣式
class="ct"的父元素下的同類子元素的第一個(gè)，分別為p(內(nèi)容為222)和第二個(gè)item1（內(nèi)容為333）有樣式
class="item2"的父元素下的同類子元素的第一個(gè)，即第四個(gè)item1(內(nèi)容為555)有樣式
綜上看來，.item1:first-of-type匹配父元素為body、ct、item2下的同類子元素的第一個(gè)，即內(nèi)容分別為111、222、333和555
第二個(gè)樣式.item1:first-child匹配的父元素下的第一個(gè)子元素，具體到代碼就是
- body父元素下的第一個(gè)子元素，即第一個(gè)item1，內(nèi)容為111；
- ct父元素下的第一個(gè)子元素，即第二個(gè)item1,內(nèi)容為222；
- item2父元素下的第一個(gè)子元素，即第五個(gè)item1，內(nèi)容為555
9.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
- text-align:center的作用是讓inline元素水平居中
- inline元素以及block內(nèi)置的inline元素
- 一般的行內(nèi)元素
<span>、<img>、<a>等
10.如果遇到一個(gè)屬性想知道兼容性，在哪查看?
可以去到caniuse.com網(wǎng)站去查詢
參考資料
