先说一说为什么css要引入伪元素和伪类，以下是章节中对伪类与伪元素的描述：
直译过来就是：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释：
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
伪类与伪元素的区别这里通过两个例子来说明两者的区别。
下面是一个简单的html列表片段：
ulli我是第一个/lili我是第二个/li/ul
如果想要给第一项添加样式，可以在为第一个li添加一个类，并在该类中定义对应样式：
HTML:
ulliclass="first-item"我是第一个/lili我是第二个/li/ul
CSS:
{color:orange}如果不用添加类的方法，我们可以通过给设置第一个li的:first-child伪类来为其添加样式。这个时候，被修饰的li元素依然处于文档树中。
CSS:
li:first-child{color:orange}下面是另一个简单的html段落片段：
pHelloWorld,andwishyouhaveagoodday!/p
如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个span元素，并设置该span元素的样式
HTML:
pspanclass="first"H/spanelloWorld,andwishyouhaveagoodday!/p
CSS:
.first{font-size:5em;}如果不创建一个span元素，我们可以通过设置p的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的span元素并添加了样式，但实际上文档树中并不存在这个span元素。
CSS:
p:first-letter{font-size:5em;}从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
伪元素是使用单冒号还是双冒号？CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。
然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。
对于伪元素是使用单冒号还是双冒号的问题，w3c标准中的描述如下：
大概的意思就是：虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。
实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。
伪类与伪元素的具体用法这一章以含义解析和例子的方式列出大部分的伪类和伪元素的具体用法。下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图：
某些伪类或伪元素仍然处于试验阶段，在使用前建议先在CanIUse等网站查一查其浏览器兼容性。接下来，我们会一一列举每种用法的具体运用，大家可以更直观的理解和记忆，处于试验阶段的伪类或伪元素会在标题中标注。
伪类状态
由于状态伪类的用法大家都十分熟悉，这里就不用例子说明了。
1:link
选择未访问的链接
2:visited
选择已访问的链接
3:hover
选择鼠标指针浮动在其上的元素
4:active
选择活动的链接
5:focus
选择获取焦点的输入字段
结构化
1:not
一个否定伪类，用于匹配不符合参数选择器的元素。
如下例，除了第一个li元素外，其他li元素的文本都会变为橙色。
HTML:
ulliclass="first-item"一些文本/lili一些文本/lili一些文本/lili一些文本/li/ul
CSS:
li:not(.first-item){color:orange;}2:first-child
匹配元素的第一个子元素。
如下例，第一个li元素的文本会变为橙色。
HTML:
ulli这里的文本是橙色的/lili一些文本/lili一些文本/li/ul
CSS:
li:first-child{color:orange;}3:last-child
匹配元素的最后一个子元素。
如下例，最后一个li元素的文本会变为橙色。
HTML:
ulli一些文本/lili一些文本/lili这里的文本是橙色的/li/ul
CSS:
li:last-child{color:orange;}4first-of-type
匹配属于其父元素的首个特定类型的子元素的每个元素。
如下例，第一个li元素和第一个span元素的文本会变为橙色。
HTML:
ulli这里的文本是橙色的/lili一些文本span这里的文本是橙色的/span/lili一些文本/li/ul
CSS:
ul:first-of-type{color:orange;}5:last-of-type
匹配元素的最后一个子元素。
如下例，最后一个li元素的文本会变为橙色。
HTML:
ulli一些文本span一些文本/spanspan这里的文本是橙色的/span/lili一些文本/lili这里的文本是橙色的/li/ul
CSS:
ul:last-of-type{color:orange;}6:nth-child
:nth-child根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数，an+b匹配到的元素示例如下：
1n+0，或n，匹配每一个子元素。
2n+0，或2n，匹配位置为2、4、6、8…的子元素，该表达式与关键字even等价。
2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。
3n+4匹配位置为4、7、10、13…的子元素。
如下例，有以下HTML列表：
olliAlpha/liliBeta/liliGamma/liliDelta/liliEpsilon/liliZeta/liliEta/liliTheta/liliIota/liliKappa/li/ol
CSS:
选择第二个元素，”Beta”会变成橙色：
ol:nth-child(2){color:orange;}选择位置序号是2的倍数的元素，”Beta”,“Delta”,“Zeta”,“kappa”会变成橙色:
ol:nth-child(2n){color:orange;}选择位置序号为偶数的元素：
ol:nth-child(even){color:orange;}选择从第6个开始，位置序号是2的倍数的元素，”Zeta”,“Theta”,“Kappa”会变成橙色：
ol:nth-child(2n+6){color:orange;}7:nth-last-child
:nth-last-child与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的。
8:nth-of-type
:nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素。
如下例，第二个p元素会变为橙色。
HTML:
articleh1我是标题/h1p一些文本/pahref=""imgsrc="images/"alt="MasteringRWD"/ap这里的文本是橙色的/p/article
CSS:
p:nth-of-type(2){color:orange;}9:nth-last-type
:nth-last-of-type与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。
10:only-child
当元素是其父元素中唯一一个子元素时，:only-child匹配该元素。
HTML:
ulli这里的文本是橙色的/li/ululli一些文本/lili一些文本/li/ul
CSS:
ul:only-child{color:orange;}11:only-of-type
当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹配该元素。
如下例，第一个ul元素只有一个li类型的元素，该li元素的文本会变为橙色。
HTML:
ulli这里的文本是橙色的/lip这里不是橙色/p/ululli一些文本/lili一些文本/li/ul
CSS:
li:only-of-type{color:orange;}12:target
当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素。
如下例，url中的target命中id值为target的article元素，article元素的背景会变为黄色。
URL:
HTML:
articleid="target"h1code:target/codepseudo-class/h1pLoremipsumdolorsitamet,consecteturadipisicingelit!/p/article
CSS:
:target{background:yellow;}表单相关
1:checked
:checked匹配被选中的input元素，这个input元素包括radio和checkbox。
如下例，当复选框被选中时，与其相邻的label元素的背景会变成黄色。
HTML:
inputtype="checkbox"/label我同意/label
CSS:
input:checked+label{background:yellow;}2:default
:default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
如下例，只有提交按钮的背景变成了黄色。
HTML:
formaction="333;}::selection{color:orange;background:666;}input::-webkit-input-placeholder{color:666;}/*Firefox18andbelow*/input:-moz-input-placeholder{color:#666;}7::backdrop(处于试验阶段)
::backdrop用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式
HTML:
h1id="element"Thisheadingwillhaveasolidbackgroundcolorinfull-screenmode./h1buttononclick="varel=('element');();"Triggerfullscreen!/buttonCSS:
h1:fullscreen::backdrop{background:orange;}转载自：
