背景
CSS 是開放網(wǎng)絡(luò) open web 的核心語言之一，由 W3C 規(guī)范 進(jìn)行標(biāo)準(zhǔn)化采郎。CSS 分為不同等級(jí)千所，CSS1 現(xiàn)已廢棄狂魔， CSS2.1 是推薦標(biāo)準(zhǔn)， CSS3 分成多個(gè)小模塊淫痰，正在標(biāo)準(zhǔn)化中最楷。
CSS定義
層疊樣式表 (Cascading Style Sheets)，炒恚縮寫為 CSS籽孙， 是一門 樣式表 (stylesheet) 語言，用來描述 HTML火俄、XML（包括各種 XML 語言如 SVG犯建、XHTML）文檔的呈現(xiàn)。CSS 描述了在屏幕瓜客、電子紙适瓦、音頻或其它媒體上如何渲染元素。
問答
1. CSS選擇器常見的有幾種?
常見的選擇器有基礎(chǔ)選擇器谱仪、基于關(guān)系的組合選擇器玻熙、屬性選擇器、偽類選擇器疯攒、偽元素嗦随，下面列舉部分說明。
- 基礎(chǔ)選擇器
| 基礎(chǔ)選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| p | 標(biāo)簽選擇器敬尺，匹配p標(biāo)簽元素 | p{color: red;} |
| .boy | 類選擇器枚尼，匹配類名為boy的元素 | .classname{font-size: 12px;} |
| #header | Id選擇器，匹配Id為header的元素 | #idname{margin: 0 auto;} |
| * | 通配符選擇器砂吞，匹配所有元素 | *{margin: 0;padding: 0;} |
- 組合選擇器
| 組合選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| A>B | 子代選擇器署恍，匹配父元素為A的所有B元素 | div>.boy{font-family: "黑體";} |
| A B | 后代選擇器，匹配A元素下所有B元素 | div p{font-weight: 700;} |
| A,B | 多元素選擇器呜舒，匹配所有A和B元素 | .header,.content{border: 1px solid pink;} |
| A+B | 所有緊跟著A元素的B元素 | div+p{background-color: #ccc;} |
| A~B | 所有兄長元素為A元素的B元素 | span~a{text-decoration: none;} |
- 屬性選擇器
| 屬性選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| E[A] | 所有屬性有A的E元素 | input[target] |
| E[A=b] | 所有屬性A的屬性值為b的E元素 | input[type=text] |
| E[A~=b] | 所有屬性A的屬性值包含了單詞b的E元素 | p[title=car] |
| E[A｜=b] | 所有屬性A的首個(gè)屬性值為b（包括屬性值以b-開頭锭汛，即b-c亦可）的E元素 | p[lang｜=en] |
- 偽類選擇器
| 偽類選擇器 | 含義 | 實(shí)例 |
|---|---|---|
| E:link | 匹配所有未被點(diǎn)擊的鏈接 | a:link{color: black;} |
| E:visited | 匹配所有已被點(diǎn)擊的鏈接 | a:visited{color: blue;} |
| E:hover | 匹配鼠標(biāo)懸停其上的E元素 | span:hover{background-color: pink;} |
| E:active | 匹配鼠標(biāo)已經(jīng)按下、還沒有釋放的E元素 | a:active{color: yellow;} |
| E:focus | 匹配獲得當(dāng)前焦點(diǎn)的E元素 | input:focus{background-color: gray;} |
| E:lang(it) | 匹配屬性lang首個(gè)屬性值為it(包括屬性值以it-開頭袭蝗，即it-us亦可)的E元素 | p:lang(it){text-align: center;} |
- 偽元素
| 偽元素 | 含義 | 實(shí)例 |
|---|---|---|
| E::after | 在E元素后面插入生成內(nèi)容 | .txt::after{content: "";width:0;height:0;position:absolute;border-bottom:10px solid #ccc;} |
| E::before | 在E元素前面插入生成內(nèi)容 | .txt::before{content: "";width:0;height:0;position:absolute;border-bottom:10px solid #ccc;} |
| E::first-letter | 匹配E元素第一個(gè)字母 | p::first-letter{color:pink;} |
| E::first-line | 匹配E元素第一行內(nèi)容 | p::first-line{color:pink;} |
2. 選擇器的優(yōu)先級(jí)是怎樣的?
各種類型選擇器唤殴、行內(nèi)樣式的權(quán)重可以參照下面的趣味圖：
選擇器的優(yōu)先級(jí)有3個(gè)原則：
- 選擇器越精確優(yōu)先級(jí)越高（權(quán)重越高優(yōu)先級(jí)越高）
- 下面比上面優(yōu)先級(jí)高
- ！important優(yōu)先級(jí)最高
3. class 和 id 的使用場景?
| 選擇器 | 適用范圍 |
|---|---|
| 類選擇器 | 一般用于小區(qū)塊到腥、公共樣式 |
| Id選擇器 | 一般用于宏觀布局和頁面結(jié)構(gòu)的樣式朵逝、DOM定位節(jié)點(diǎn) |
4. 使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g？
語義化的命名可以使機(jī)器乡范、開發(fā)者配名、用戶更好的理解代碼或頁面啤咽，提高了效率就創(chuàng)造了價(jià)值。
5. 以下選擇器分別是什么意思?
| 選擇器 | 含義 |
|---|---|
| #header | Id名為header的元素 |
| .header | 類名為header的元素 |
| .header .logo | 類名為header的后代中類名為logo的元素 |
| .header.mobile | 類名為header且為mobile的元素 |
| .header p, .header h3 | 類名為header的后代中所有的p渠脉、h3標(biāo)簽元素 |
| #header .nav>li | Id名為header的后代中類名為nav的子元素中所有的li標(biāo)簽元素 |
| #header a:hover | Id名為header的所有a標(biāo)簽元素后代再匹配鼠標(biāo)懸停在該a標(biāo)簽上 |
6. 列出你知道的偽類選擇器
見題1中的偽類選擇器宇整，這里再補(bǔ)充一些：
| 偽類選擇器 | 含義 |
|---|---|
| E:first-child | 長子中所有的E元素 |
| E:nth-child(n) | 兄弟中排第n的所有E元素 |
| E:nth-last-child(n) | 和上面的差不多，只不過n是從最后一個(gè)兄弟數(shù)起 |
| E:nth-of-type(n) | 同類型元素中排名第n的所有E元素 |
| E:first-of-type | 同類型元素中的所有為E元素的長子 |
| E:last-of-type | 同類型元素中的所有為E元素最小的兒子 |
| E:empty | 沒有后代的所有E元素 |
| E:target | 已觸發(fā)錨鏈接的目標(biāo)E元素 |
| E:checked | 已被選的所有E元素 |
| E:enabled | 在啟用的所有E元素 |
| E:disabled | 在禁用的所有E元素 |
7. :first-child和:first-of-type的作用和區(qū)別
| 偽類選擇器 | 含義 | 區(qū)別 |
|---|---|---|
| E:first-child | 選擇長子中所有的E元素 | 所有兄弟中的長子且是E元素 |
| E:first-of-type | 選擇同類型元素中的所有為E元素的長子 | 只是同類型元素的兄弟中為E元素的長子 |
圖解如下：
8. 運(yùn)行如下代碼芋膘，解析下輸出樣式的原因鳞青。
.item1:first-child——所有類名為item的長子只有<p class="item1">aa</p>。
.item1:first-of-type——所有同類型為p類型/標(biāo)簽元素中類名為item1的長子只有<p class="item1">aa</p>为朋，所有同類型為h3類型/標(biāo)簽元素中類名為item1的長子只有<h3 class="item1">bb</h3>臂拓。
故aa字體紅色、背景藍(lán)色习寸，bb背景藍(lán)色胶惰。
9. text-align: center的作用是什么，作用在什么元素上霞溪？能讓什么元素水平居中
text-align:center規(guī)定行內(nèi)內(nèi)容相對父元素居中對齊孵滞，測試text-align: center在塊級(jí)元素、行內(nèi)元素威鹿、行內(nèi)塊元素的效果如下：
顯然剃斧，所謂行內(nèi)內(nèi)容包括行內(nèi)元素、行內(nèi)塊元素和行內(nèi)文本忽你。
10. 如果遇到一個(gè)屬性想知道兼容性幼东，在哪查看?
點(diǎn)擊查看兼容性，如下：
參考
本文章著作權(quán)歸饑人谷_九霄和饑人谷所有科雳，轉(zhuǎn)載須說明來源
