選擇器的規(guī)則結(jié)構(gòu)
class 和 id 的使用場景?
- 在HTML文檔中可以為多個(gè)元素進(jìn)行指定相同的class屬性值；(為多個(gè)需要同時(shí)修改樣式的元素設(shè)定相同class值，使之使用同一個(gè)類選擇器)
- 但在HTML文檔中不能存在多個(gè)id屬性值相同的元素伊佃；（為某個(gè)特定的元素聲明獨(dú)立的id選擇器）
CSS選擇器常見的有幾種?
- 基礎(chǔ)選擇器
- 類選擇器 .class
- id選擇器 #id
- 標(biāo)簽選擇器 p
- 通用選擇器 *
- 屬性選擇器 E[attr]
- 組合選擇器
- 多元素選擇器 E,F
- 后代選擇器 E F
- 子選擇器 E>F
- 直接相鄰祖選擇器 E+F,匹配E元素之后的相鄰的同級元素F
- 普通相鄰選擇器 E~F,匹配E元素之后的同級元素F（無論直接相鄰與否）
- .class1.class2 id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符情龄，. 和 # 本身充當(dāng)分隔符的元素
- element#id id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符灭忠，. 和 # 本身充當(dāng)分隔符的元素
- 偽類選擇器
- 偽元素選擇器
選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計(jì)算優(yōu)先級简卧？
選擇器的優(yōu)先級是由它們各自的特殊性決定，特殊性值表述為四個(gè)部分族跛，如0,0,0,0
- 對于選擇器給定的各個(gè)id屬性值闰挡，加0,1,0,0
- 對于選擇器給定的各個(gè)類屬性值、屬性選擇或偽類礁哄，加0,0,1,0
- 對于選擇器給定的各個(gè)元素和偽類元素长酗，加0,0,0,1
- 對于內(nèi)聯(lián)聲明的特殊性，為1,0,0,0
- 對于標(biāo)志為桐绒！important的聲明夺脾，會(huì)覆蓋頁面任何位置定義的元素樣式！important總是放在聲明的最后茉继，如果放在聲明的其它位置咧叭，整個(gè)聲明會(huì)失效。
烁竭！important > style屬性的內(nèi)聯(lián)樣式 > id選擇器 > 類選擇器 > 偽類選擇器 > 屬性選擇器 > 標(biāo)簽選擇器 > 通配符選擇器 > 瀏覽器自定義
a:link, a:hover, a:active, a:visited 的順序是怎樣的菲茬？ 為什么？
按照link-visited-hover-active的順序聲明，因?yàn)樗鼈儞碛邢嗤臋?quán)重生均、來源和特殊性，因此與元素匹配的最后一個(gè)選擇器樣式覆蓋腥刹，以這種順序聲明是合理的马胧。
復(fù)雜情況下根據(jù)選擇器的特殊性對權(quán)值進(jìn)行計(jì)算，最后采用權(quán)值大的樣式
以下選擇器分別是什么意思?
-
header{
} 元素id值為header的選擇器
- .header{
} 元素class值為header的選擇器 - .header .logo{
} 匹配class為header的元素所有的后代 為class值為logo元素的選擇器 - .header.mobile{
} 匹配元素同時(shí)滿足class值既為header也為mobile的選擇器 - .header p, .header h3{
} 同時(shí)匹配元素class值為header的后代 p標(biāo)簽選擇器和h3標(biāo)簽的選擇器 -
header .nav>li{
} 匹配元素id值為header的后代 元素class值為nav的直接子元素（li）的選擇器
-
header a:hover{
} 匹配元素id值為header的后代 為a:hover的選擇器
-
header .logo~p{
} 匹配元素id值為header的后代中元素class值為logo之后的同級相鄰p標(biāo)簽（無論是否直接相鄰）的選擇器
-
header input[type="text"]{
} 匹配元素id值為header的后代中為input標(biāo)簽且屬性type為text的選擇器
我所知道的偽類選擇器
- E:first-child 匹配作為長子（第一個(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元素
- E:lang(c) 匹配lang屬性等于c的E元素
- E:enabled 匹配表單中可用的元素
- E:disabled 匹配表單中禁用的元素
- E:checked 匹配表單中被選中的radio或checkbox元素
- E::selection 匹配用戶當(dāng)前選中的元素
div:first-child佩脊、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
- div:first-child 匹配符合div選擇器垫卤，而且必須是其父元素的第一個(gè)子節(jié)點(diǎn)元素
- div:first-of-type 匹配符合div選擇器威彰，而且是與其它同類型、同級的兄弟元素中的第一個(gè)元素
- div :first-child 匹配div選擇器下第一個(gè)子節(jié)點(diǎn)元素
- div :first-type-of 匹配div選擇器下同種類型穴肘、同級兄弟元素中的第一個(gè)元素
運(yùn)行如下代碼歇盼，解析下輸出樣式的原因
.item1:first-child{ color: red; }因?yàn)閜標(biāo)簽的class值為item1，且作為其父元素下第一個(gè)子節(jié)點(diǎn)元素评抚，所以被匹配到字體顏色變?yōu)榧t色豹缀；
.item1:first-of-type{ background: biue; }因?yàn)閜標(biāo)簽class值為item1，且作為其父元素下相同類型的第一個(gè)子節(jié)點(diǎn)元素慨代，所以被匹配到背景為藍(lán)色邢笙；最后兩行的h3標(biāo)簽class值都為item1，但作為相同類型的子節(jié)點(diǎn)元素侍匙，在該選擇器下氮惯，只匹配到第一個(gè)元素為藍(lán)色背景；
