一漫仆、CSS選擇器常見的有幾種?
常見選擇器有如下幾種：
1. 基礎(chǔ)選擇器：
基礎(chǔ)選擇器
2. 組合選擇器：
組合選擇器
3. 屬性選擇器：
屬性選擇器
4. 偽類選擇器：
偽類選擇器
5. 偽元素選擇器：
偽元素選擇器
二种吸、選擇器的優(yōu)先級是怎樣的?
當(dāng)同一個(gè)元素在多個(gè)不同的地方定義不同的屬性值，那么最后渲染的樣式效果以哪里定義為準(zhǔn)惊豺，這就涉及到優(yōu)先級問題燎孟，除了每個(gè)選擇器有規(guī)定的優(yōu)先級外，基本規(guī)則是規(guī)定屬性越具體優(yōu)先級越高尸昧，例如內(nèi)聯(lián)樣式表>內(nèi)部樣式表>外部樣式表揩页；
以下是css樣式、選擇器的優(yōu)先級從高到低排列：
1. 在屬性后面使用 !important 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式
2. 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3. id選擇器
4. 類選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標(biāo)簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義
三烹俗、class 和 id 的使用場景?
- id：id選擇器爆侣，使用#name定義（name為id名，可任意取名）幢妄，使用id="name"調(diào)用兔仰，其優(yōu)先級高于類選擇器，一個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用一次蕉鸳，多用于頁面分塊的塊級標(biāo)簽上乎赴；
- class：類選擇器，使用.name定義（name為類名潮尝，可任意取名）榕吼，使用class="name"調(diào)用，一個(gè)標(biāo)簽可以有多個(gè)類且同一個(gè)類可以用到不同的標(biāo)簽上勉失，多用于多個(gè)標(biāo)簽樣式相似或完全相同時(shí)羹蚣；
四、使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g戴质？
1. 方便后期代碼維護(hù)度宦，代碼可讀性更高，更容易理解樣式的意圖告匠；
2. 便于重復(fù)調(diào)用使用該樣式戈抄；
3. 便于精確定位樣式作用的位置；
4. 避免樣式污染后专；
五划鸽、以下選擇器分別是什么意思?
以下為各個(gè)選擇器的作用備注：
#header{
} /*id選擇器，匹配id="header"的元素*/
.header{
} /*類選擇器，匹配class="header"的元素*/
.header .logo{
} /*后代選擇器裸诽，匹配class="header"元素的后代元素中class="logo"的元素*/
.header.mobile{
} /*類選擇器嫂用，匹配class="header mobile"的元素*/
.header p, .header h3{
} /*多元素選擇器，匹配class="header"元素的后代p元素和后代h3元素*/
#header .nav>li{
} /*多元素選擇器丈冬，匹配id="header"元素的后代class="nav"元素的直接后代li元素*/
#header a:hover{
} /*偽類選擇器嘱函，匹配id="header"元素的后代a元素鼠標(biāo)懸浮在其表面時(shí)的樣式*/
六、列出你知道的偽類選擇器
見第一題選擇器類型中的偽類選擇器埂蕊；
七往弓、:first-child和:first-of-type的作用和區(qū)別
- ：first-child匹配的是某父元素的第一個(gè)子元素，標(biāo)簽要一致才能匹配到蓄氧；
- ：first-of-type匹配的是某父元素下相同類型子元素中的第一個(gè)函似，不再限制是第一個(gè)子元素，而是標(biāo)簽一致的第一個(gè)子元素喉童；
舉例如下：
:first-child和:first-of-type的作用和區(qū)別
八撇寞、運(yùn)行如下代碼，解析下輸出樣式的原因堂氯。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<!-- div下的第一個(gè)子元素且是類為class="item1"的第一個(gè)p元素蔑担，
所以“.item1:first-child” 和“.item1:first-of-type”對其有效-->
<h3 class="item1">bb</h3>
<!-- div下的第二個(gè)子元素且是類為class="item1"的第一個(gè)h3元素，
所以“.item1:first-of-type”對其有效-->
<h3 class="item1">ccc</h3>
</div>
所以輸出時(shí)aa字體呈紅色且?guī){(lán)色背景祖灰，bb帶藍(lán)色背景钟沛；
九、text-align: center的作用是什么局扶，作用在什么元素上恨统？能讓什么元素水平居中
-
text-align: center的作用：
是元素文本內(nèi)容水平居中，一般作用在塊級元素上三妈，使塊級元素內(nèi)部的行內(nèi)元素在占據(jù)范圍內(nèi)居中顯示畜埋，它居中是針對其父容器的空間范圍居中的；
十畴蒲、如果遇到一個(gè)屬性想知道兼容性悠鞍，在哪查看?
查詢CSS屬性的兼容性一般使用can i use網(wǎng)站；
如圖模燥，輸入inline-block咖祭，查詢結(jié)果，綠色塊標(biāo)示代表對應(yīng)瀏覽器可以支持：
can i use
聲明：本博客版權(quán)歸蘭文聰和饑人谷所有蔫骂，轉(zhuǎn)載需說明來源么翰！
