class 和 id 的使用場(chǎng)景?
class意思就是“類(lèi)” 是對(duì)一類(lèi)標(biāo)簽進(jìn)行操作，是一種"范圍殺傷"，而id選擇器具有唯一性，是“精確打擊”
CSS選擇器常見(jiàn)的有幾種?
- 基礎(chǔ)選擇器
- id選擇器 具有唯一性
- class選擇器 可重復(fù)
- ** * 通用選擇器 給整個(gè)頁(yè)面都設(shè)定相關(guān)的樣式
- 元素標(biāo)簽選擇器
- 組合選擇器
- 多元素選擇器 A，B，C{ 屬性 }
- 后代選擇器 A B 匹配A元素范圍內(nèi)的所有子元素B
- 直接后代選擇器 A>B 首先B是A的子元素 其次是要 “直接” 就是只選擇 “一層”的意思
- A+B 首先這兩個(gè)元素是同級(jí)的，其次這兩個(gè)要直接相鄰 是“親兄弟”才行
- A~B 只要同級(jí)就可以 匹配A元素之后的同級(jí)元素B 相不相鄰都無(wú)所謂
- 屬性選擇器
- A[attr] 匹配所有具有屬性attr的元素
- A[attr=value] 匹配屬性值為value的元素
- A[attr~=value] 匹配所有屬性attr具有多個(gè)空格分隔，其中一個(gè)值等于value的元素
- A[attr^=value] 匹配屬性attr的值以value開(kāi)頭的元素
- A[attr$=value] 匹配屬性attr的值以value結(jié)尾的元素
- A[attr*=value] 匹配屬性attr的值包含value的元素
- 偽類(lèi)選擇器
- A:first-child:匹配元素A的第一個(gè)子元素
- A:link ：匹配素有未被點(diǎn)擊的鏈接
- A:visited :匹配所有已經(jīng)被點(diǎn)擊的鏈接
- A:active :匹配鼠標(biāo)已經(jīng)在其上按下，但是還沒(méi)有釋放的A元素
- A:hover :匹配鼠標(biāo)懸停其上的A元素
- A:focus :匹配獲得當(dāng)前焦點(diǎn)的A元素
- A:lang(c) :匹配lang屬性等于c的元素
- A:enabled :匹配表單中可用的元素
- Adisabled :匹配表單中禁用的元素
- A:checked: 匹配表單中被選中的radio或checkbox元素
- A:selection: 匹配用戶(hù)當(dāng)前選中的元素
- A:root :匹配文檔的根元素，對(duì)于HTML文檔，就是HTML元素
- A:nth-child(n) :匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
- A:nth-last-child :匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
- A:nth-of-type(n):與:nth-child作用類(lèi)似，但是僅匹配使用同種標(biāo)簽的元素
- A:nth-last-of-type(n) :與nth-last-child作用相似，但是僅匹配使用同種標(biāo)簽的元素
- A:first-child:匹配父元素的第一個(gè)子元素
- A:last-child :匹配父元素的最后一個(gè)子元素
- A:first-of-type :即 A:nth-of-type(1)
- A:last-of-type :即 A:nth-last-of-type(1)
- A:only-child :匹配父元素下僅有的一個(gè)子元素
- A:only-of-type :匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素
- 偽元素選擇器
A::first-line 匹配E元素內(nèi)容的第一行
A::first-letter 匹配E元素內(nèi)容的第一個(gè)字母
A::before 在E元素之前插入生成的內(nèi)容
-
A::after 在E元素之后插入生成的內(nèi)容
*content：''；一定得帶上 *
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？
-
優(yōu)先級(jí)排序
- 帶有
!important的值權(quán)重最高，覆蓋一切，但是要慎用！ - 行內(nèi)樣式 直接把樣式與html代碼混在一起寫(xiě)，這種方法寫(xiě)出來(lái)的樣式，權(quán)重也很高，但 是最好不要用。
- ID選擇器 算是正常范圍選擇器內(nèi)權(quán)重最高的了
- 類(lèi)選擇器 也就是 class選擇器
- 偽類(lèi)選擇器 類(lèi)似于
a:hover a:fouces這種的選擇器 - 屬性選擇器 操作input時(shí)常用 像
input[type="text"] {}就是屬性選擇器了 - 標(biāo)簽選擇器 像這種
p{}這種選擇器選擇范圍超級(jí)廣，但是老師叮囑過(guò)最好別用 - 通配符選擇器像這種
*{}這種選擇器基本不用了 - 瀏覽器自帶樣式這種的話(huà)一般在寫(xiě)頁(yè)面的時(shí)候都會(huì)被重置
- 帶有
-
復(fù)雜場(chǎng)景下的選擇器優(yōu)先級(jí)排序
上一個(gè)小題已經(jīng)說(shuō)明了選擇器的優(yōu)先級(jí)是怎么排的了，就我自己的理解來(lái)看，第一種第二種和第 八第九種在正常狀態(tài)下可以忽略了就，從id選擇器開(kāi)始，給每個(gè)種類(lèi)的選擇器的權(quán)限大小賦予 相應(yīng)的計(jì)量單位，我自己分配的計(jì)量單位如下：- id選擇器在篩選之后的選擇器中權(quán)重最高，所以給他的單位為“萬(wàn)”
- class選擇器弱一點(diǎn)兒給它單位 “千”
- 偽類(lèi)選擇器的單位是“百”
- 屬性選擇器的單位是“十”
- 標(biāo)簽選擇器的單位是 “個(gè)”
接著舉個(gè)栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>看看權(quán)重</title>
<style>
p{
color: blue;
}
.yezhu{
color: red;
}
#yezhu-pro{
color: pink;
}
p.yezhu{
color: yellow;
}
#yezhu-pro.yezhu{
color: #257eb8;
}
/*
根據(jù)我的“個(gè)，十，百，千，萬(wàn)論證法” 來(lái)看看怎么分權(quán)重
1.最高的無(wú)疑是最后一個(gè)選擇器了有一個(gè)id選擇器那就是1萬(wàn)還有個(gè)類(lèi)選擇器那就是1千合起來(lái)最后的權(quán)重值是11000
2.注釋掉最高的，那排第二的就是第三個(gè)選擇器了權(quán)重值10000，剩下的依次類(lèi)推就可以了
*/
</style>
</head>
<body>
<p id="yezhu-pro" class="yezhu">這是一只野豬</p>
</body>
</html>
```
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
這三個(gè)為類(lèi)選擇器的書(shū)寫(xiě)順序?yàn)?/p>
a:link{}
a:visited{}
a:hover{}
a:active{}
之所以按這種順序?qū)懯且驗(yàn)榕滤麄兿嗷ジ采w，影響顯示效果
以下選擇器分別是什么意思?
#header{
}
/*選擇ID為header的元素*/
.header{
}
/*選擇class為header的元素*/
.header .logo{
}
/*選擇class為header的范圍內(nèi) 類(lèi)名為logo的元素*/
.header.mobile{
}
/*選擇既有header類(lèi)又有mobile類(lèi)的元素*/
.header p, .header h3{
}
/*給類(lèi)名為header中的p和同樣范圍內(nèi)的h3寫(xiě)上相同的樣式*/
#header .nav>li{
}
/*id為header的范圍中，類(lèi)名叫nav的元素里，把表層的li都選上，不進(jìn)行 “擊穿式查找” */
#header a:hover{
}
/*給class叫header的范圍內(nèi)里面的a標(biāo)簽設(shè)一個(gè)hover為類(lèi)*/
#header .logo~p{
}
/*選擇id為header的范圍面的class為logo的元素中p的所有所有所有同輩兄弟標(biāo)簽*/
#header input[type="text"]{
}
/*在class為header的范圍內(nèi) 選擇輸入框類(lèi)型為text的輸入框 設(shè)定相應(yīng)的樣式*/
列出你知道的偽類(lèi)選擇器
- a:link 匹配所有未被點(diǎn)擊的鏈接
- a:visited 匹配所有已被點(diǎn)擊的鏈接
- a:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒(méi)有釋放的E元素
- a:hover 匹配鼠標(biāo)懸停在上面時(shí)所產(chǎn)生的變化
- a:enabled 匹配表單中可用的元素
- a:disabled 匹配表單中禁用的元素
- a:checked 匹配表單中被選中的radio或checkbox元素
- a::selection 匹配用戶(hù)當(dāng)前選中的元素
- a:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
- a:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1
- a:nth-of-type(n) 與:nth-child()作用類(lèi)似，但是僅匹配使用同種標(biāo)簽的元素
- a:nth-last-of-type(n) 與:nth-last-child() 作用類(lèi)似，但是僅匹配使用同種標(biāo)簽的元素
div:first-child、div:first-of-type的作用和區(qū)別
作用
div:first-child 選中其父元素下第一個(gè)子元素
div:first-of-type 選中其父元素下使用相同標(biāo)簽的第一個(gè)子元素
區(qū)別
這兩種方式容易混淆，但是也容易區(qū)分，主要是要記住這兩種選擇器的選擇依據(jù)，第一種是以子元 素?cái)?shù)量作為依據(jù)進(jìn)行選擇，第二種是以標(biāo)簽為依據(jù)進(jìn)行選擇在相同的標(biāo)簽中進(jì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>
顯示結(jié)果為 aa文字顏色為紅色，背景為藍(lán)色，bb文字顏色為黑色背景蔚藍(lán)色，ccc沒(méi)有任何變化
原因
第一個(gè)樣式選擇器選的是將排序?yàn)榈谝坏臉邮矫麨閕tem1的元素里面的文字變成紅色。
第二個(gè)選擇器的意思是首先選擇元素的位置也是選第一個(gè)元素不過(guò)不同在于是選擇使用item1類(lèi)名并且標(biāo)簽也是第一個(gè)的元素，確定范圍之后進(jìn)行篩選首先確定使用item1的元素有1個(gè)P標(biāo)簽2個(gè)h3標(biāo)簽，結(jié)果是選第一個(gè)p標(biāo)簽（其實(shí)就一個(gè)p標(biāo)簽也不用怎么選....），和第一個(gè)h3標(biāo)簽。最終結(jié)果就出來(lái)了。
