class和id的使用場(chǎng)景
- class用于主區(qū)塊里面的詳細(xì)內(nèi)容枚冗，同一個(gè)class可以重復(fù)出現(xiàn)凸郑，一個(gè)標(biāo)簽可以有幾個(gè)不同的class剂习。
- id多使用于主要塊級(jí)元素皇拣，id一個(gè)頁(yè)面中只能出現(xiàn)一次，有些獨(dú)一無(wú)二元素也可用id逻翁。
CSS選擇器常見(jiàn)的有幾種
- 基礎(chǔ)選擇器
| 選擇器 | 含義 |
|---|---|
| * | 通用元素選擇器饥努，匹配頁(yè)面任何元素（這也就決定了我們很少使用） |
| #id | id選擇器，匹配特定id的元素 |
| .class | 類選擇器卢未，匹配class包含(不是等于)特定類的元素 |
| element | 標(biāo)簽選擇器 |
- 組合選擇器
| 選擇器 | 含義 |
|---|---|
| E,F | 多元素選擇器肪凛，用,分隔，同時(shí)匹配元素E或元素F |
| E F | 后代選擇器辽社，用空格分隔伟墙，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F |
| E>F | 子元素選擇器滴铅，用>分隔戳葵，匹配E元素的所有直接子元素 |
| E+F | 直接相鄰選擇器，匹配E元素之后的相鄰的同級(jí)元素F |
| E~F | 普通相鄰選擇器（弟弟選擇器）汉匙，匹配E元素之后的同級(jí)元素F（無(wú)論直接相鄰與否） |
| .class1.class2 | id和class選擇器和選擇器連寫(xiě)的時(shí)候中間沒(méi)有分隔符拱烁，. 和 # 本身充當(dāng)分隔符的元素 |
| element#id | id和class選擇器和選擇器連寫(xiě)的時(shí)候中間沒(méi)有分隔符，. 和 # 本身充當(dāng)分隔符的元素 |
- 屬性選擇器
| 選擇器 | 含義 |
|---|---|
| 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開(kāi)頭的元素 |
| E[attr $= value] | 匹配屬性attr的值以value結(jié)尾的元素 |
| E[attr * = value] | 匹配屬性attr的值包含value的元素 |
- 偽類選擇器
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配作為長(zhǎng)子（第一個(gè)子女）的元素E |
| E:link | 匹配所有未被點(diǎn)擊的鏈接 |
| E:visited | 匹配所有已被點(diǎn)擊的鏈接 |
| E:active | 匹配鼠標(biāo)已經(jīng)其上按下伤锚、還沒(méi)有釋放的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 | 匹配文檔的根元素擅笔，對(duì)于HTML文檔，就是HTML元素 |
| E:nth-child(n) | 匹配其父元素的第n個(gè)子元素屯援，第一個(gè)編號(hào)為1 |
| E:nth-last-child(n) | 匹配其父元素的倒數(shù)第n個(gè)子元素猛们，第一個(gè)編號(hào)為1 |
| E:nth-of-type(n) | 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素 |
| E:nth-last-of-type(n) | 與:nth-last-child() 作用類似狞洋，但是僅匹配使用同種標(biāo)簽的元素 |
| E:last-child | 匹配父元素的最后一個(gè)子元素弯淘，等同于:nth-last-child(1) |
| 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) |
| E:empty | 匹配一個(gè)不包含任何子元素的元素借嗽，文本節(jié)點(diǎn)也被看作子元素 |
| E:not(selector) | 匹配不符合當(dāng)前選擇器的任何元素 |
- 偽元素選擇器
| 選擇器 | 含義 |
|---|---|
| E::first-line | 匹配E元素內(nèi)容的第一行 |
| E::first-letter | 匹配E元素內(nèi)容的第一個(gè)字母 |
| E::before | 在E元素之前插入生成的內(nèi)容 |
| E::after | 在E元素之后插入生成的內(nèi)容 |
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)怕午？
選擇器的優(yōu)先級(jí)從高到低分別是
- 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復(fù)雜場(chǎng)景優(yōu)先級(jí)計(jì)算規(guī)則是
- 行內(nèi)樣式計(jì)數(shù)1000；
- id選擇器計(jì)數(shù)100淹魄；
- 類、屬性堡距、偽類選擇器計(jì)數(shù)10甲锡；
- 標(biāo)簽兆蕉、偽元素選擇器計(jì)數(shù)1；
- 通過(guò)以上計(jì)數(shù)計(jì)算選擇前的優(yōu)先級(jí)結(jié)果缤沦，數(shù)字越大優(yōu)先級(jí)越高虎韵。
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么缸废？
a:link -> a:visited -> a:hover -> a:active
- 鼠標(biāo)經(jīng)過(guò)的“未訪問(wèn)鏈接”同時(shí)擁有a:link包蓝、a:hover、a:active三種屬性企量，后面的屬性會(huì)覆蓋前面的屬性定義测萎，所以a:link必須放在a:hover的前面，a:hover必須放在a:active的前
- 鼠標(biāo)經(jīng)過(guò)的“已訪問(wèn)鏈接”同時(shí)擁有a:visited届巩、a:hover硅瞧、a:link三種屬性，后面的屬性會(huì)覆蓋前面的屬性定義恕汇，此時(shí)a:visted和a:link必須放在a:hover的前面
以下選擇器分別是什么意思?
-
#headerid名為header的元素 -
.headerclass名為header的元素 -
.header .logoclass名為header的元素下的class名為logo的子元素 -
.header.mobileclass名同時(shí)為header和mobile的元素 -
.header p, .header h3class名為header的元素下所有的p子元素和h3子元素 -
#header .nav>liid名為header的元素下的所有class名為nav的子元素的直接子元素li -
#header a:hoverid名為header的元素下的所有a標(biāo)簽在鼠標(biāo)懸停時(shí)的狀態(tài) -
#header .logo~pid名為header的元素下的class名為logo的元素及其后面的同級(jí)p元素 -
#header input[type="text"]id名為header的元素下的所有type屬性為text的input元素
div:first-child腕唧、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
-
div:first-child父元素下第一個(gè)子元素且其必須為div元素 -
div:first-of-type父元素下第一個(gè)div元素 -
div :first-childdiv元素下的所有后代的第一個(gè)子元素 -
div :first-of-typediv元素下的所有后代中標(biāo)簽相同的第一個(gè)子元素
運(yùn)行代碼瘾英，解析下輸出樣式的原因枣接。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p> // A
<h3 class="item1">bb</h3> // B
<h3 class="item1">ccc</h3> // C
</div>
- A行作為.item1的父元素下的第一個(gè)子元素，文字顏色被改為紅色缺谴；同時(shí)作為.item1的父元素下的第一個(gè)p元素但惶，背景色改為藍(lán)色。
- B行作為.item1的父元素下的第一個(gè)h3元素瓣赂，背景色改為藍(lán)色榆骚；但它不是其父元素的第一個(gè)子元素，文字顏色不變煌集。
- C行既不是.item1的第一個(gè)子元素妓肢，也不是.item1的第一個(gè)h3元素，文字顏色和背景色都不變苫纤。
