CSS 系列之伪类与伪元素

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

• 锚伪类
• 表单伪类
• 结构化伪类

锚伪类

• :link
• :visited
• :hover
• :active

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

表单伪类

• :checked
• :disabled
• :enabled
• :focus
• :required
• :invalid
• :valid
• :in-range       ---选择元素指定范围内的值
• :out-of-range       ---选择指定范围以外的值的元素属性
• :optional       ---选择没有"required"的元素属性
• :read-only
• :read-write       ---选择没有只读属性的元素属性

结构化伪类

:first-child　　
:last-child　　
:nth-child(n)　　
:nth-last-child(n)　　
:only-child　　

:first-of-type　　---匹配属于其父元素的首个特定类型的子元素的每个元素；
:last-of-type　　 ---匹配元素的最后一个子元素；
:nth-of-type(n)　　 ---:nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素；
:nth-last-type(n)　　---:nth-last-of-type与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的；
:only-of-type　　 ---当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹配该元素；

:not　　　　　　　　---否定伪类，用于匹配不符合参数选择器的元素；
:target　　　　　　 ---当URL带有锚

关于child与:nth-of-type的区别，请参考CSS3选择器:nth-child和:nth-of-type之间的差异

其他

:root　　---匹配文档的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素则可能是其他元素
:lang　　---向带有指定 lang 属性的元素添加样式。

任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

伪元素

CSS 伪元素用于向某些选择器设置特殊效果。

伪元素内容

:first-letter
:first-line
:before
:after

一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。

伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的。