CSS3选择器攻略~

本篇只介绍CSS3新增选择器，CSS3之前的不会出现。

目录

>  直接子元素选择器

+ 毗邻选择器

~  关联选择器

::first-letter 

::first-line

::selection

：target   

[class] (匹配有class属性的元素)

[class='abc'] (匹配class是abc的元素)

[class^='abc'] (匹配class是以abc开头的元素) 关键词（以...开头）

[class$='abc'] (匹配class是以abc结尾的元素) 关键词（以...结尾）

[class~='abc'] (匹配多个属性值中具有abc属性值的元素)  

[class*='abc'] (匹配多个属性值中包含abc属性值的元素) ~= 和 *= 比较容易混淆，但仔细看一下就能看懂了。

:first-child   

:last-child   

:nth-child（2）   

:nth-last-child（2）   

p:nth-of-type(1)   

---

>  直接子元素选择器

顾名思义是只会选择到下一层的子元素，不会选子元素的子元素，举个栗子~

+ 毗邻选择器

匹配紧邻在该元素后面的一个兄弟元素，关键词（近邻，兄弟）！看栗子~

~  关联选择器

匹配该元素后面的所有指定兄弟元素，关键词（所有，兄弟）！

::first-letter 

匹配首字符

::first-line

匹配首行

::selection

匹配鼠标左键选中的文字，默认是蓝底白字

加样式后可自定义了

：target   

可以对跳转到锚点的元素进行自定义样式

[class] (匹配有class属性的元素)

• [class='abc'] (匹配class是abc的元素)

• [class^='abc'] (匹配class是以abc开头的元素) 关键词（以...开头）

• [class$='abc'] (匹配class是以abc结尾的元素) 关键词（以...结尾）

• [class~='abc'] (匹配多个属性值中具有abc属性值的元素)  

• [class*='abc'] (匹配多个属性值中包含abc属性值的元素) ~= 和 *= 比较容易混淆，但仔细看一下就能看懂了。

:first-child   

匹配第1个子元素

:last-child   

匹配最后1个子元素

:nth-child（2）   

匹配第2个位置上的子元素，括号内是第几个，从1开始  关键词（指定某个位置）

:nth-last-child（2）   

匹配倒数第2个位置上的子元素，括号内是第几个，从1开始  关键词（指定某个位置）

p:nth-of-type(1)   

匹配第一个元素类型为p的元素，会无视掉其他元素  关键词（不指定某个位置，一直到找到该元素的位置为止）