標籤：
一、ＣＳＳ新增選取器：
１、Ｅ[att ^ = "val"]匹配具有att屬性，並以值val開頭。
樣本：
<style>
div[class^="a"]{
color:blue;
}
</style>
<div>
<div class="a1">測試資料a1</div>
<div class="a2">測試資料a2</div>
<div class="b2">測試資料b2</div>
<div class="b1">測試資料b1</div>
<div class="c1">測試資料c1</div>
<div class="c2">測試資料c2</div>
<div class="c3">測試資料c3</div>
</div>
2、Ｅ[att $ = "val"]匹配具有att屬性，並以值val結尾。 樣本：
<style>
div[class$="3"]{
color:blue;
}
</style>
<div>
<div class="a1">測試資料a1</div>
<div class="a2">測試資料a2</div>
<div class="b2">測試資料b2</div>
<div class="b1">測試資料b1</div>
<div class="c1">測試資料c1</div>
<div class="c2">測試資料c2</div>
<div class="c3">測試資料c3</div>
</div>
3、Ｅ[att * = "val"]匹配具有att屬性，包含val。
4、Ｅ[att = "val"]匹配具有att屬性，等於val。
二、結構性偽類
1、E:nth-child(n)匹配在父元素中第N個子項目E
樣本：
p:nth-child(2){
color: red;
}
<div>
<p>測試資料</p>
<p>測試資料</p>
<p>測試資料</p>
<p>測試資料</p>
<p>測試資料</p>
<p>測試資料</p>
</div>
2、E:nth-last-child(n)匹配在父元素中倒數第N個子項目E
3、E:nth-of-type(n)匹配在同類型中第N個同級元素E
4、E:nth-last-of-type(n)匹配在同類型中倒數第N個同級元素E
5、E:last-child匹配在父元素中最後一個元素E
6、E:first-of-type匹配在父元素中第一個元素E
7、E:only-child匹配在父元素中唯一子項目E
8、E:only-of-type匹配在同類型中唯一兄弟元素E
9、E:empty匹配沒有任何子項目的元素E
三、元素狀態選取器 1、E:checked（被選中）當複先框被選中時
樣本：input:checked + span::after{
content: "測試";
display: block;
width: 100px;
height: 30px;
color:blue;
background-color: red;
}
<div style="height: 400px;width: 600px;border:1px solid blue">
<input type="checkbox"/>
<span>歡迎！</span>
</div>
2、E:enabled(可用)
3、E:disabled(不可用)
4、E：:selection(選中)當文本被選中時
樣本：span::selection{
color: red;
background-color: blue;
}
<span>測試資料測試資料測試資料測試資料測試資料測試資料</span>； 四、過濾選取器 E：not(s) 過濾S，否定偽類別選取器
五、目標偽類別選取器 E：target 通過跳轉（可用id/name）跳轉改變
六、相鄰選取器 E+E{} 第1個不改變，相鄰後面才改變
七、兄弟選取器 E~E{...}第1個不改變，後面全改變
樣本：p~p{
color: red;
}
<p>測試資料</p>
<p>測試資料</p>
<p>測試資料</p>
ＣＳＳ選取器歸納
