class 和 id 的使用場(chǎng)景?
- id具有唯一性，id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式蚓峦。CSS 中 id 選擇器以 "#" 來定義舌剂。
- class具有普遍性，class 選擇器有別于id選擇器暑椰，class可以在多個(gè)元素中使用霍转。在 CSS 中，類選擇器以一個(gè)點(diǎn)"."號(hào)顯示
CSS選擇器常見的有幾種?
| 基礎(chǔ)選擇器 |
含義 |
| * |
通用元素選擇器一汽，匹配頁面任何元素 |
| #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（無論直接相鄰與否） |
| .class1.class2 |
id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素 |
| element#id |
id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符腾它，. 和 # 本身充當(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開頭的元素 |
| E[attr $= value] |
匹配屬性attr的值以value結(jié)尾的元素 |
| E[attr *= value] |
匹配屬性attr的值包含value的元素 |
| 偽類選擇器 |
含義 |
| E:first-child |
匹配元素E的第一個(gè)子元素 |
| 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: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í)從高到低：
（1）在屬性后面使用 !important 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式
（2）作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
（3）id選擇器
（4）類選擇器
（5）偽類選擇器
（6）屬性選擇器
（7）標(biāo)簽選擇器
（8）通配符選擇器
（9）瀏覽器自定義
- 復(fù)雜情況下：
先設(shè)置
行內(nèi)樣式 ==> a
ID 選擇器 ==> b
類宁仔，屬性選擇器和偽類選擇器 ==> c
標(biāo)簽選擇器稠屠、偽元素 ==> d
按照a，b台诗，c完箩，d的順序設(shè)置優(yōu)先級(jí)就行。
a:link, a:hover, a:active, a:visited 的順序是怎樣的拉队？ 為什么弊知？
正確的順序?yàn)閍:link、a:visited粱快、a:hover秩彤、a:active簡(jiǎn)稱“LVHA”叔扼。以上語句定義了"鏈接平時(shí)狀態(tài)、已訪問過的鏈接狀態(tài)漫雷、鼠標(biāo)停在上方時(shí)的狀態(tài)瓜富、點(diǎn)下鼠標(biāo)時(shí)狀態(tài)"的樣式。 .
- 首先題目中的順序降盹，正是平時(shí)點(diǎn)擊鏈接時(shí)的步驟：link是鏈接平時(shí)的狀態(tài)与柑，放最前。然后hover是鼠標(biāo)懸停在鏈接上蓄坏，接著active點(diǎn)擊鏈接价捧，最后是已訪問后的鏈接狀態(tài)。
- 但是涡戳，鏈接被點(diǎn)擊之后 a:visited所聲明的樣式就會(huì)生效结蟋，當(dāng)把鼠標(biāo)放到鏈接之上或者按下鼠標(biāo)鍵的時(shí)候a:hover或者a:active所聲明的樣式會(huì)被a:visited所覆蓋。（當(dāng)選擇器優(yōu)先級(jí)別相同時(shí)渔彰，后面的會(huì)覆蓋前面的）所以a:visited要位于a:hover和a:active之前嵌屎。
以下選擇器分別是什么意思?
#header{ }選擇id為header的元素
.header{ } 選擇class為header的元素
.header .logo{ }選擇class為header的元素下class為logo的所有元素
.header.mobile{ }選擇class中既有header又有mobile的元素
.header p, .header h3{ }選擇class為header的元素后代中p和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的元素后代中input標(biāo)簽的type屬性為text的元素
列出你知道的偽類選擇器
| 偽類選擇器 |
含義 |
| E:first-child |
匹配元素E的第一個(gè)子元素 |
| 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: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的作用和區(qū)別
- div:first-child：匹配div父元素的第一個(gè)子元素屎即。
- div:first-of-type：匹配div父元素下使用同標(biāo)簽的第一個(gè)子元素。
運(yùn)行如下代碼事富，解析下輸出樣式的原因技俐。
- .item1:first-child：匹配item1的父元素的第一個(gè)子元素為紅色，即“ct”的第一個(gè)子元素“item1”统台。所以aa為紅色雕擂。
- .item1:first-of-type：匹配item1的父元素下使用同標(biāo)簽的第一個(gè)子元素。父元素“ct”下贱勃，一個(gè)是p標(biāo)簽井赌，另一個(gè)是h3標(biāo)簽谤逼。p只有一個(gè)aa，h3第一個(gè)子元素是bb仇穗，所以aa和bb背景為藍(lán)色流部。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
