class 和 id 的使用場(chǎng)景?
- class在使用時(shí)可以將多個(gè)標(biāo)簽設(shè)為同一類类嗤，一個(gè)頁面中可以有多個(gè)class出現(xiàn)
- id在使用時(shí)每個(gè)頁面中的id是唯一的，id能夠快速獲取標(biāo)簽對(duì)象
- 另外：還有name的使用場(chǎng)景name能在form表格中給服務(wù)器獲取列表的變量名俊鱼，同時(shí)在input type="radio"時(shí)相同的name會(huì)構(gòu)成同組單選按鈕
CSS選擇器常見的有幾種?
基礎(chǔ)選擇器：
- *那婉，匹配頁面任何元素卸亮，因?yàn)樗鼪]有針對(duì)性的特點(diǎn)讓我們很少去使用它
- 井id塑荒，id選擇器熄赡，對(duì)頁面中某個(gè)id元素進(jìn)行選擇
- .class,類選擇器靴寂，選擇頁面中的某一類
- element牛柒，標(biāo)簽選擇器熄攘，直接選擇頁面的標(biāo)簽
組合選擇器：
- E,F 多元素選擇器桦他，同時(shí)選中頁面中的多個(gè)元素
- E F 后代選擇器，同時(shí)選中E元素下的后代F,并且不僅僅是F购公，子元素向下遞歸
- E>F子元素選擇器，選擇E中的所有直接子元素F
- E+F選擇E和F兩個(gè)相鄰的同級(jí)元素
- E~F弟弟選擇器，同時(shí)選擇E和F兩個(gè)元素陌知，無論E和F是否相鄰
- .E.F id和class同時(shí)選擇時(shí)中間沒有分隔符，可以直接用.相連
屬性選擇器：
- E[attr]：如div[id]即為可以取到所有標(biāo)簽是div且有id的屬性
- E[attr = value]:匹配屬性attr值為value的元素掖肋，div[id=test],匹配id=test的div
偽類選擇器：
- E:first-child 匹配作為長(zhǎng)子（第一個(gè)子女）的元素E
- 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元素
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？
志笼！improtant>行內(nèi)樣式>id選擇器>類選擇器>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)的屬性
a:link, a:hover, a:active, a:visited 的順序是怎樣的沿盅？ 為什么？
狀態(tài)分析：未點(diǎn)擊時(shí)會(huì)有l(wèi)ink-懸停時(shí)會(huì)有hover-點(diǎn)擊后會(huì)有active-點(diǎn)擊完成會(huì)變成visited
在點(diǎn)擊完成后應(yīng)該會(huì)有l(wèi)ink之后會(huì)有visited才能把hover和active覆蓋掉纫溃，所以在配置順序時(shí)應(yīng)該先是link-visited-hover-active
以下選擇器分別是什么意思?
#header{選擇id為header的標(biāo)簽}
.header{選擇類為header的標(biāo)簽}
.header .logo{選擇類為header且后代類為logo的元素}
.header.mobile{同時(shí)選擇類為header和類為mobile的元素}
.header p, .header h3{選擇類為header中標(biāo)簽為p和h3的元素}
#header .nav>li{選擇id為header且屬于nav類中的li標(biāo)簽}
#header a:hover{選擇header的后代a中狀態(tài)為hover的屬性}
#header .logo~p{選擇id為header后代中l(wèi)ogo的同級(jí)元素p}
#header input[type="text"]{選擇id為header且input類型為text的元素}
列出你知道的偽類選擇器
- E:first-child：匹配元素E的第一個(gè)子元素
- E:nth-child：匹配元素E的第n個(gè)子元素
- E:enabled和E:disabled：匹配元素E的狀態(tài)為可用/不可用
- E:checked和E:selection：匹配元素E的狀態(tài)為單選框選中/復(fù)選框選中
- a:link：未被點(diǎn)擊的鏈接
- a:visited：已被點(diǎn)擊的鏈接
- a:hover：鼠標(biāo)懸停其上的鏈接
- a:active：鼠標(biāo)已經(jīng)按下腰涧，但沒有釋放的鏈接
div:first-child和div:first-of-type的作用和區(qū)別
- div:first-child:選擇其父元素首個(gè)類型為div的標(biāo)簽,且第一個(gè)元素必須是div才能選中
- div:first-of-type:選擇父元素中div這種標(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> <h3 class="item1">bb</h3> <h3 class="item1">ccc</h3> </div>
- .item1:first-child{ color: red;}：是表示選擇類為item1的標(biāo)簽中的第一個(gè)設(shè)置顏色為紅色
- .item1:first-of-type{ background: blue;}：是表示選擇類為item1的標(biāo)簽中每種標(biāo)簽的第一個(gè)背景為藍(lán)色
