class 和 id 的使用場(chǎng)景?
- “#id" ID選擇器捌年，不可以沖突鹏氧，一個(gè)ID定位一個(gè)元素淋叶，調(diào)用方式為"id=xx"仑荐，通常使用在屬性不同的元素上雕拼。
- .class 類選擇器，匹配頁面上 class 相同的元素粘招，class 可以重復(fù)使用啥寇，屬性相似的元素可以使用相同的 class
CSS選擇器常見的有幾種?
- 基礎(chǔ)選擇器通用選擇器
- 通用選擇器
- ID選擇器
- 類選擇器
- 標(biāo)簽選擇器
- 組合選擇器
- E,F 多元素選擇器，用
,分隔洒扎，同時(shí)匹配元素E或F - E F 后代選擇器辑甜，用空格分隔，匹配E元素所有的后代
- E,F 多元素選擇器，用
- 屬性選擇器
- E[attr] 匹配所有具有屬性attr的元素
- E[attr = value] 匹配屬性attr值為value的元素
- 偽類選擇器
- E:hover 匹配鼠標(biāo)懸停其上的E元素
- E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素
- 偽元素選擇器
- 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ì)覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
a:link, a:hover, a:active, a:visited 的順序是怎樣的胡诗？ 為什么邓线？
正確的順序?yàn)椋篴:link、a:visited煌恢、a:hover骇陈、a:active
- 寫在后面的樣式會(huì)覆蓋寫在前面的樣式；
- 鏈接不可能同時(shí)處于未訪問和已訪問兩種狀態(tài)瑰抵；
- 鼠標(biāo)經(jīng)過的“未訪問鏈接”同時(shí)觸發(fā)a:link你雌、a:hover兩個(gè)偽類；
- 鼠標(biāo)經(jīng)過的“已訪問鏈接”同時(shí)擁有a:visited二汛、a:hover兩個(gè)偽類婿崭；
- 鼠標(biāo)在點(diǎn)擊鏈接但是未釋放時(shí)，會(huì)同時(shí)觸發(fā)a:hover肴颊、a:active兩個(gè)偽類氓栈；
所以：a:link、a:visited 順序可以互換婿着，a:hover定義一定要放在a:link颤绕、a:visited的后面幸海，a:active 需要放到 a:hover 后面。
以下選擇器分別是什么意思?
#header{
}
.header{
}
.header .logo{
}
.header.mobile{
}
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}
#header .logo~p{
}
#header input[type="text"]{
}
-
#header匹配 id 等于 header 的元素 -
.header匹配 class 等于 header 的元素 -
.header .logo匹配 class 等于 header 元素的后代元素中 class 等于 logo 的元素 -
.header.mobile匹配 class 等于 header 且 class 等于mobile 的元素 -
.header p, .header h3匹配 class 等于header元素的所有后代元素p奥务，或者匹配 class 等于header元素的所有后代元素h3 -
#header .nav>li匹配 id 等于header元素的所有后代元素中的
class 等于 nav 的直接子元素 li -
#header a:hover匹配 id 等于 header 元素的所有被鼠標(biāo)懸停的后代a元素 -
#header .logo~p匹配 id 等于header 元素的所有后代元素中 class 等于 logo 的同級(jí)元素 p -
#header input[type="text"]匹配 id 等于header 元素的所有后代元素中 type=text的input元素
列出你知道的偽類選擇器
- 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 匹配文檔的根元素袜硫，對(duì)于HTML文檔氯葬，就是HTML元素
- E:first-child 匹配作為長(zhǎng)子（第一個(gè)子女）的元素E
- 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)前選擇器的任何元素
div:first-child妄讯、div:first-of-type孩锡、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
-
div:first-child匹配父元素中的的第一子元素div -
div:first-of-type匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素div -
div :first-child匹配div中的第一個(gè)子元素 -
div :first-of-type匹配div中的下一個(gè)首次出現(xiàn)的元素
運(yùn)行如下代碼，解析下輸出樣式的原因亥贸。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
image.png
-
.item1:first-child匹配父元素中的第一個(gè)類為 item1 的子元素躬窜，而 aa 父元素div中第一個(gè)類為item1的元素，所以 aa 的顏色為紅色 -
.item1:first-of-type匹配父元素中使用同種標(biāo)簽的第一個(gè)類為 item1 的元素炕置，而 aa荣挨、bb 的分別為父元素 div 中的使用同種標(biāo)簽的第一個(gè)與元素，所以 aa朴摊、bb 的背景色為藍(lán)色 - cc 則未匹配到任何屬性默垄，所以安裝默認(rèn)樣式顯示
