一、CSS選擇器常見(jiàn)的有幾種?
二埠帕、選擇器的優(yōu)先級(jí)是怎樣的?
單個(gè)選擇器從高到低分別是：
- 在屬性后面使用
!important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式 - 作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類(lèi)選擇器
- 偽類(lèi)選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
組合選擇器：
- 比較組合選擇器的權(quán)值
- 相同權(quán)值選擇器，層級(jí)越長(zhǎng)優(yōu)先級(jí)越高
- 相同權(quán)值選擇器肚菠，越接近目標(biāo)標(biāo)簽則優(yōu)先級(jí)越高
- 相同優(yōu)先級(jí)相等罩旋，需要看在CSS中的順序无虚，后面的大于前面的
三边涕、class 和 id 的使用場(chǎng)景?
**1. id **指定標(biāo)簽的唯一標(biāo)識(shí)晤碘。
- 1.1 格式：<input type=password id="userpwd" />
- 1.2 應(yīng)用場(chǎng)景：
- 唯一id號(hào)，快速獲取標(biāo)簽對(duì)象奥吩。如：document.getElementById(id)
- 用于充當(dāng)label標(biāo)簽for屬性的值：示例：<label for='userid'>用戶(hù)名：</label>哼蛆，表示單擊此label標(biāo)簽時(shí)蕊梧，id為userid的標(biāo)簽獲得焦點(diǎn)霞赫。
- 一般用于布局（比如 header，content肥矢，footer.....）端衰，一些獨(dú)一無(wú)二的元素也可以使用。
2. class 指定標(biāo)簽的類(lèi)名甘改。
- 2.1 格式：<input type=button class="btn-submit" />
- 2.2 應(yīng)用場(chǎng)景：
- CSS操作旅东，把一些特定樣式放到一個(gè)class類(lèi)中，需要此樣式的標(biāo)簽十艾，可以在添加此類(lèi)抵代。
- 在HTML中可以多次使用，并且可以多次重復(fù)使用同一類(lèi)名忘嫉。
四荤牍、使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g？
- 方便代碼的管理與維護(hù)
- 提高代碼的可讀性
- 避免與他人代碼相沖突
相關(guān)參考：
amazeUi-css編碼規(guī)范1
amazeUi-css編碼規(guī)范2
CSS命名空間前綴的思考
五庆冕、以下選擇器分別是什么意思?
#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元素的:hover偽類(lèi)*/
六康吵、列出你知道的偽類(lèi)選擇器
七、:first-child和:first-of-type的作用和區(qū)別
- :first-child的作用是匹配父元素下的第一個(gè)子元素
- :first-of-type的作用是匹配父元素下指定類(lèi)型的第一個(gè)子元素
區(qū)別：要區(qū)別在于:first-of-type選擇的子元素是從父元素下的指定類(lèi)型的第一個(gè)子元素访递，而:first-child選擇的子元素是從父元素下第一個(gè)子元素
八晦嵌、運(yùn)行如下代碼，解析下輸出樣式的原因。
Paste_Image.png
藍(lán)色背景：
樣式里面設(shè)置了first-of-type惭载，也就是第一個(gè)類(lèi)型的元素將應(yīng)用為藍(lán)色背景旱函，而第一個(gè)類(lèi)型就是p和h3，h3有2個(gè)描滔，取第一個(gè)陡舅。
紅色字：
first-child是指后代中第一個(gè)子元素，第一個(gè)子元素是p伴挚，所以只是p應(yīng)用了紅色字靶衍。
九、 text-align: center 的作用是什么茎芋，作用在什么元素上颅眶？能讓什么元素水平居中
作用：使行內(nèi)元素（文字、圖片）水平居中
作用元素：塊級(jí)元素
能讓什么元素水平居中：塊級(jí)元素內(nèi)部的行內(nèi)元素
十田弥、如果遇到一個(gè)屬性想知道兼容性涛酗，在哪查看?
利用 can i use 即可查詢(xún)
<p>版權(quán)歸本人及饑人谷所有，轉(zhuǎn)載請(qǐng)注明出處偷厦。
