class和id
class類選擇器：在html中用class=“name”調用樣式，在css中通過類選擇器.name{}定義樣式，一個標簽中可以包含多個類，統一個類也可以出現在不同的標簽里，所以類選擇器用于多個標簽的樣式相似或相同時。
id選擇器：在html中用id=“name”調用樣式，在css中通過id選擇器#name{}定義樣式，一個標簽只能有一個id所以id選擇器用在和其它標簽沒有相似樣式的時候。
選擇器類型
- 基礎選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
基礎選擇器
- * 通用元素選擇器，匹配頁面中所有元素
- #id id選擇器,匹配特定的id元素
- .class 類選擇器，匹配class中包含的特定類的元素
- element 標簽選擇器
組合選擇器
- E，F 多元素選擇器，同時匹配元素E，F
- E F 后代選擇器，中間用空格分開，匹配元素E后面的所有的后代元素F（不論子代，孫代都被選中，注意和子代選擇器的區別）
- E>F 子代選擇器，用>分隔，匹配E下的所有直接子元素F
- E+F 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F，當相鄰同級元素不是F則不被選中
- E~F 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
- .class1.class2 /element#id/element.class 中間沒有分隔符，同時滿足兩個條件才匹配
屬性選擇器
- E[attr] 匹配所有具有屬性attr的元素，div[id]就能匹配所有id屬性的div
- E[attr =value] 匹配屬性attr且值為value的元素，div[id =test]匹配id=test的div
- E[attr ～=value] 匹配所有屬性attr具有多個空格分開，其中一個值為value的元素
- E[attr ^=value] 匹配屬性attr的值以value開頭的屬性
- E[attr *=value] 匹配屬性attr的值中包含value的屬性
- E[attr $=value] 匹配屬性attr的值以value結尾的屬性
偽類選擇器
- E:first-child 匹配第一個子女的元素E
- E:link 匹配所有未被點擊的鏈接
- E:visited 匹配所有已被點擊的鏈接
- E:active 匹配鼠標已經其上按下、還沒有釋放的E元素
- E:hover 匹配鼠標懸停其上的E元素
- E:focus 匹配獲得當前焦點的E元素
- E:lang(c) 匹配lang屬性等于c的E元素
- E:enabled 匹配表單中可用的元素
- E:disabled 匹配表單中禁用的元素
- E:checked 匹配表單中被選中的radio或checkbox元素
- E::selection 匹配用戶當前選中的元素
- E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素
- E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
- E:nth-last-child(n) 匹配其父元素的倒數第n個子元素，第一個編號為1
- E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
- E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標簽的元素
- E:last／first-child 匹配父元素的最后一個子元素，等同于:nth-last／first-child(1)
- E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
- E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)
n的取值：1、2、3、4.../2n+1、2n、4n+1/odd、even
偽元素選擇器
- E::first-line 匹配E元素內容的第一行
- E::first-letter 匹配E元素內容的第一個字母
- E::before 在E元素之前插入生成的內容
- E::after 在E元素之后插入生成的內容
- E::before／after{content:"內容"; color=""}
選擇器的權重
- 在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內聯樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復雜場景下的選擇器優先級在保證以上條件下兩個相同類型的選擇器權重大于一個相同類型的選擇器，但不大于權重靠前的任意選擇器
a:link 未被點擊的狀態
a:visited 被點擊后的狀態
a:hover 鼠標懸停的狀態
a:active 點擊過程中的狀態
樣式覆蓋 link是沒點擊的狀態，當點擊后visited被聲明優先級大于link，當鼠標移到a處hover被聲明優先級大于visited，active同理
以下選擇器的意思
.header{} 選中id="header" 唯一
.header{} 選中class="header" 可多個
.header .logo{} 選中class="header"下的所有class="logo" 后代選擇器
.header.mobile{} 選中選中class="header"且class="mobile"的元素
.header p,.header h3{} 選中class="header"下的所有p和class="header"下的h3（后代+多元素）
#header .nav>li{} 選中id="header"下的class="nav"下的子元素里的所有的li
#header a:hover{} 選中id="header"下a標簽并設置hover狀態
#header .logo~p{} 選中id="header"下的和class="logo"同級的p
#header input[type="text"]{} 選中id="header"下input標簽屬性是type值為text的元素
區別
div:first-child意思是div的父元素下的第一個子元素且為div時被選中
div:first-of-type意思是div父元素下的同級別元素中的第一個div被選中
div: first-child（:后面有空格）意思是div元素下的第一個子元素被選中（有空格是后代選擇器）
div: first-of-type意思是div元素下同級別元素中相同的第一個被選中
頁面輸出的效果
<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選中其父元素<div class="ct">下的第一個類為item1的元素就是<p class="item1">，所以aa顏色是紅色
.item1:first-of-type選中其父元素<div class="ct">下的不同類型的第一個子元素是<p class="item1">aa</p>和<h3 class="item1">bb</h3>，所以aa和bb的背景色是藍色
