CSS3新增伪类举例

1. 伪类与伪元素

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

 

CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

 

伪元素	作用
::first-letter	将样式添加到文本的首字母
::first-line	将样式添加到文本的首行
::before	在某元素之前插入某些内容
::after	在某元素之后插入某些内容

 

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

CSS3为了区分伪类和伪元素，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。伪元素由双冒号和伪元素名称组成。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

 

2、CSS3新增伪类

 

新增伪类	作用
p:first-of-type	选择属于其父元素的首个<p>元素的每个<p>元素。
p:last-of-type	选择属于其父元素的最后<p>元素的每个<p>元素。
p:only-of-type	选择属于其父元素唯一的<p>元素的每个<p>元素。
p:only-child	选择属于其父元素唯一的子元素的每个<p>元素。
p:nth-child(n)	选择属于其父元素的第n个子元素的每个<p>元素。
p:nth-last-child(n)	选择属于其父元素的倒数第n个子元素的每个<p>元素。
p:nth-of-type(n)	选择属于其父元素第n个<p>元素的每个<p>元素。
p:nth-last-of-type(n)	选择属于其父元素倒数第n个<p>元素的每个<p>元素。
p:last-child	选择属于其父元素最后一个子元素的每个<p>元素。
p:empty	选择没有子元素的每个<p>元素（包括文本节点）。
p:target	选择当前活动的<p>元素。
:not(p)	选择非<p>元素的每个元素。
:enabled	控制表单控件的可用状态。
:disabled	控制表单控件的禁用状态。
:checked	单选框或复选框被选中。

伪类	作用
:hover	将样式添加到鼠标悬浮的元素
:active	将样式添加到被激活的元素
:focus	将样式添加到获得焦点的元素
:link	将样式添加到未被访问过的链接
:visited	将样式添加到被访问过的链接
:first-child	将样式添加到元素的第一个子元素
:lang	定义指定的元素中使用的语言