一、CSS選擇器常見的有幾種?
1. 基礎(chǔ)選擇器
- *：通用元素選擇器身笤，匹配頁面任何元素
- id選擇器:選擇指定id屬性值為"id"的html元素豹悬，選擇的時(shí)候前面加上一個(gè)#號
- class選擇器：類選擇器，選擇指定classs屬性值為“class”的任意多個(gè)html元素液荸，選擇的時(shí)候前面加上一個(gè).號
- element:標(biāo)簽選擇器
2. 組合選擇器
- E,F：多元素選擇器瞻佛，用，隔開娇钱，同時(shí)匹配元素E或者F
- E F：后代選擇器伤柄，用空格隔開涡尘，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
- E>F：子元素選擇器响迂，用>分隔考抄，匹配E元素的所有直接子元素
- E+F：直接相鄰選擇器，匹配E元素之后的相鄰?fù)壴谾
- E~F：普通相鄰選擇器（弟弟選擇器）蔗彤，匹配E元素之后的同級元素F（無論直接相鄰與否）
- .class1.class2：id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符川梅，.
和 # 本身充當(dāng)分隔符的元素 - element#id：id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，.
和 # 本身充當(dāng)分隔符的元素
3. 屬性選擇器
屬性選擇器通過已經(jīng)存在的屬性名或?qū)傩灾灯ヅ湓?/p>
- E[attr]：匹配所有具有屬性attr的元素然遏，div[id]就能取到所有有id屬性的div
- E[attr = value]：匹配屬性attr值為value的元素贫途，div[id=test],匹配id=test的div
- E[attr ~= value]：匹配所有屬性attr具有多個(gè)空格分隔、其中一個(gè)值等于value的元素
- E[attr ^= value]：匹配屬性attr的值以value開頭的元素
- E[attr $= value]：匹配屬性attr的值以value結(jié)尾的元素
- E[attr *= value]：匹配屬性attr的值包含value的元素
4. 偽類選擇器
- 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:disabled：匹配表單中禁用的元素
- E:checked：匹配表單中被選中的radio或checkbox元素
- E::selection：匹配用戶當(dāng)前選中的元素
- E:first-child：匹配元素E的第一個(gè)子元素
- E:nth-child(n)：匹配其父元素的第n個(gè)子元素丢早，第一個(gè)編號為1
- E:first-of-type：匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)
5. 偽元素選擇器 - E::before 在E元素之前插入生成的內(nèi)容
- E::after 在E元素之后插入生成的內(nèi)容
二秧倾、選擇器的優(yōu)先級是怎樣的?
從高到低分別是：
- 在屬性后面使用
怨酝！important會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式，全局優(yōu)先級最高 - 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
三那先、class 和 id 的使用場景?
id：id具有唯一性农猬。在同一HTML文檔中不能有兩個(gè)具有相同id值的元素。通常用來定義頁面中大的樣式售淡。如：header,content,footer等斤葱。
class：class用于可以重復(fù)使用的HTML元素中。用來定義一些比較細(xì)節(jié)的樣式揖闸。如：具體的一個(gè)菜單揍堕，一行文字等。
四汤纸、使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g衩茸？
瀏覽器會(huì)因?yàn)槊牟灰?guī)范而產(chǎn)生不同樣式，適當(dāng)?shù)拿臻g可以避免命名的沖突蹲嚣，方便代碼的維護(hù)递瑰。
五、以下選擇器分別是什么意思?
<pre>
header{} /*id選擇器隙畜，匹配id=“header”的元素*/
.header{} /*class選擇器抖部，匹配class=“header”的元素*/
.header .logo{} /*后代選擇器，匹配class=“header”元素下所有class=“l(fā)ogo”的元素*/
.header.mobile{} /*類選擇器议惰，匹配class=“header”元素且同時(shí)class=“mobile”的元素*/
.header p, .header h3{}/*多元素選擇器慎颗，匹配class=“header”元素下的P元素 和 h3元素*/
header .nav>li{}/*后代選擇器，匹配id=“header”下class=“nav”的直接子元素li*/
header a:hover{}/*后代選擇器，匹配鼠標(biāo)懸停在id=“header”元素下的a元素*/
</code>
</pre>
六俯萎、 列出你知道的偽類選擇器傲宜？
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元素
E:enabled：匹配表單中可用的元素
E:disabled：匹配表單中禁用的元素
E:checked：匹配表單中被選中的radio或checkbox元素
E::selection：匹配用戶當(dāng)前選中的元素
E:root：匹配文檔的根元素夫啊，對于HTML文檔函卒，就是HTML元素
E:first-child：匹配元素E的第一個(gè)子元素
E:last-child：匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)
E:nth-child(n)：匹配其父元素的第n個(gè)子元素撇眯，第一個(gè)編號為1
E:nth-last-child(n)：匹配其父元素的倒數(shù)第n個(gè)子元素报嵌，第一個(gè)編號為1
E:nth-of-type(n) ：與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n)：與:nth-last-child() 作用類似熊榛，但是僅匹配使用同種標(biāo)簽的元素
E:first-of-type：匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素锚国，等同于:nth-of-type(1)
E:last-of-type：匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)
E:only-child：匹配父元素下僅有的一個(gè)子元素玄坦，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type：匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素血筑，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
七、:first-child和:first-of-type的作用和區(qū)別煎楣？
：first-child：匹配父元素的第一個(gè)子元素
：first-of-type：匹配父元素下指定類型的第一個(gè)子元素豺总，等同于：nth-of-type(1)
<pre>
<style>
h1:first-child{ color:green; }
p:first-of-type{ color:yellow; }
</style>
<body>
<div>
<h1>子元素1</h1>
<p>子元素2</p>
<p>子元素3</p>
<p>子元素4</p>
</div>
</body>
</pre>
h1:first-child{color:green;}匹配到的是h1，因?yàn)閔1是div的第一個(gè)子元素转质，將其顏色設(shè)置為綠色园欣。
p:first-of-type{color:yellow;}匹配到的是p元素帖世，因?yàn)閜元素是div所有類型為p的子元素中的第一個(gè)休蟹，將其顏色設(shè)置為黃色。
八日矫、運(yùn)行如下代碼赂弓，解析下輸出樣式的原因。
九哪轿、text-align: center的作用是什么盈魁，作用在什么元素上？能讓什么元素水平居中窃诉。
text-align: center作用是使元素中的文本水平居中杨耙。
作用在塊級元素上。設(shè)置文本或者img標(biāo)簽等一些內(nèi)聯(lián)對象（或與之類似的元素）的居中飘痛。若要整個(gè)內(nèi)容水平居中珊膜，需要在添加塊級元素中添加text-align:center和margin：0 auto樣式⌒觯或者說在塊級元素中添加display：inline-block车柠。
十、如果遇到一個(gè)屬性想知道兼容性，在哪查看?
可以在can I use上查看
版權(quán)歸本人及饑人谷所有竹祷，轉(zhuǎn)載請注明出處谈跛。
