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