基本選擇器
*{} 通配符選擇器，適用任何元素
h1 標簽選擇器，選擇h1標簽內元素
.parent 類名選擇器，選擇class名為parent的元素
#child id選擇器，選擇id 名為child的元素
注意：class名不是唯一的，可以給多個元素同樣的class名稱，或者一個元素多個class名，但是同一個id名在一個頁面內只允許出現一次，是唯一的。
多元素組合選擇器
E,F 多元素選擇器，同時匹配滿足E和滿足F的元素，用逗號隔開
E F 后代選擇器，匹配E元素后代中滿足F的元素，空格隔開
E>F 子代選擇器，匹配E元素的子代元素中滿足F的元素
E+F 毗鄰選擇器，匹配所有緊跟E元素之后的統計F元素
E～F 匹配任何在E元素之后的同級F元素
屬性選擇器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。
E[att=val] 匹配所有att屬性等于"val"的E元素
E[att^="val"] 屬性att的值以"val"“開頭的元素
E[att$="val"] 屬性att的值以"val”結尾的元素
E[att*="val"] 屬性att的值包含"val“的元素
偽類選擇器
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-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth- child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一個不包含任何子元素的元素，文本節點也被看作子元素
E:not(selector) 匹配不符合當前選擇器的任何元素
偽元素選擇器
E::first-line 匹配E元素內容的第一行
E::first-letter 匹配E元素內容的第一個字母
E::before 在E元素之前插入生成的內容
E::after 在E元素之后插入生成的內容
選擇器優先級以及權重
優先級（下面選擇器優先級逐級遞增）
通配符選擇器<標簽選擇器<屬性選擇器<偽類選擇器<類選擇器<id選擇器<作為style屬性寫在元素標簽上的內聯樣式<在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
權重計算
內聯樣式 權重值：1000
ID選擇器 權重值：0100
類，偽類和屬性選擇器 權重值：0010
標簽選擇器和偽元素選擇器 權重值：0001
通配符 權重值：0000
a:link, a:hover, a:active, a:visited 的順序是怎樣的？
順序應為：a:link > a:visited > a:hover > a:active因為這四個偽類權重相同，所以遵循后面覆蓋前面的原則，點擊a鏈接后visited將永久生效，因此如果將visited放在最后，則visited會覆蓋前面所有效果。因此如果想要hover和active生效，則需要將visited放在這兩個之前。同理當鼠標放在a鏈接上時，hover生效，如果點擊鼠標時候active生效，則需要active覆蓋hover，所以所以active應該放在hover之后，所以最終的順序如上所示.
以下選擇器分別是什么意思?
#header{ /*匹配id="header"的元素 */
}
.header{ /*匹配class="header"的所有元素*/
}
.header .logo{ /*匹配class="header"元素的所有class="logo"的后代元素*/
}
.header.mobile{ /*匹配class="header mobile"的元素或類名同時含有header mobile的元素*/
}
.header p, .header h3{ /*匹配class="header"元素所有后代p元素和所有后代h3元素*/
}
#header .nav>li{ /*匹配id="header"元素所有后代類名為nav的直接子元素li元素*/
}
#header a:hover{ /*可以控制id="header"元素所有后代a元素鼠標懸浮其上的樣式*/
}
#header .logo~p{ /*匹配id="header"元素所有后代類名為logo元素的相鄰同級p元素（無論直接相鄰與否）*/
}
#header input[type="text"]{ /*匹配id="header"元素所有后代type="text"的input元素*/
}
列出你知道的偽類選擇器
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標已經其上按下、還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:first-child 匹配元素E的第一個子元素
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-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 ：
div:first-child： 匹配作為第一個子元素的div元素
div:first-of-type： 匹配第一個div子元素
div :first-child： 匹配div父元素的第一個子元素
div :first-of-type： 匹配div父元素的第一個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>
結果：aa字體顏色為紅色，aa bb的背景為藍色
原因：div共有三個子元素分別為p h3 h3，.item1:first-child表示class為item且是父元素的第一個子元素即為aa元素，字體變紅，.item1:first-of-type表示class為item且該子元素類型為父元素內出現的第一個即為aa bb 。背景變藍。
