CSS選擇器

僞類選擇器

：nth-child & :nth-of-type

• nth-child(an+b)匹配在文檔樹中前面有an+b-1個 兄弟元素 的元素，此時n大於或等於0，而且該元素具備父元素。簡而言之，該選擇器匹配多個位置知足an+b的子元素。

• :nth-of-type(an+b) 匹配在文檔樹中第an+b個元素，該元素前面有an+b-1個 相同標籤名的兄弟元素 ，此時n大於或等於0，而且該元素具備父元素。

//css
p:nth-child(2){
  color:red;
}
div:nth-of-type(2){
  color:red;
}

//html
<div>
    <p>p1</p>
    <div>div1</div>
    <p>p2</p>
    <div>div2</div>
</div>

//result:只有 div2 是紅色

:empty

• :empty 僞類 表明沒有子元素的元素。 這裏說的子元素，只計算元素結點及文本（包括空格），註釋、運行指令不考慮在內。

:target

• :target 表明一個特殊的元素，它的id是URI的片斷標識符

//html
<div id="a">a</div>
<div id="b">b</div>
<a href="#a">a</a>
<a href="#b">b</a>

//css
:target { color:red; }

//result:點擊連接，應用樣式於錨對應id的元素

:enabled

• :enabled 表示任何啓用的（enabled）元素。若是一個元素 可以被激活 （如選擇、點擊或接受文本輸入）或獲取焦點，則該元素是啓用的。元素還有一個禁用的狀態（disabled state），在被禁用時，元素不能被激活或獲取焦點。

基於關係的選擇器

選擇器	選擇的元素
A E	元素A的任一後代元素E (後代節點指A的子節點，子節點的子節點，以此類推)
A > E	元素A的任一子元素E(也就是直系後代)
E:first-child	任一是其父母結點的第一個子節點的元素E
B + E	元素B的任一下一個兄弟元素E
B ~ E	B元素後面的擁有共同父元素的兄弟元素E