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