总结伪类与伪元素_html/css_WEB-ITnose

HTML:

 
我是第一个
 
我是第二个

CSS:

li.first-item { color: orange}

如果不用添加类的方法，我们可以通过给设置第一个

HTML:

 
我是第一个
 
我是第二个

CSS:

li:first-child { color: orange}

下面是另一个简单的html段落片段：

Hello World, and wish you have a good day!

如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式：

HTML:

Hello World, and wish you have a good day!

CSS:

.first { font-size: 5em;}

如果不创建一个元素，我们可以通过设置

的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。

HTML:

Hello World, and wish you have a good day!

CSS:

p:first-letter { font-size: 5em;}

从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

3.伪元素是使用单冒号还是双冒号？

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。

对于伪元素是使用单冒号还是双冒号的问题，w3c标准中的描述如下：

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

大概的意思就是：虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。

实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。

4.伪类与伪元素的具体用法

这一章以含义解析和例子的方式列出大部分的伪类和伪元素的具体用法。下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图：

某些伪类或伪元素仍然处于试验阶段，在使用前建议先在Can I Use等网站查一查其浏览器兼容性。处于试验阶段的伪类或伪元素会在标题中标注。

伪类

状态

由于状态伪类的用法大家都十分熟悉，这里就不用例子说明了。

1 :link

选择未访问的链接

2 :visited

选择已访问的链接

3 :hover

选择鼠标指针浮动在其上的元素

4 :active

选择活动的链接

5 :focus

选择获取焦点的输入字段

结构化

1 :not

一个否定伪类，用于匹配不符合参数选择器的元素。

如下例，除了第一个

HTML:

 
一些文本
 
一些文本
 
一些文本
 
一些文本

CSS:

li:not(.first-item) { color: orange;}

2 :first-child

匹配元素的第一个子元素。

如下例，第一个

HTML:

 
这里的文本是橙色的
 
一些文本
 
一些文本

CSS:

li:first-child { color: orange;}

3 : last-child

匹配元素的最后一个子元素。

如下例，最后一个

HTML:

 
一些文本
 
一些文本
 
这里的文本是橙色的

CSS:

li:last-child { color: orange;}

4 first-of-type

匹配属于其父元素的首个特定类型的子元素的每个元素。

如下例，第一个

HTML:

 	 
 	 
 
这里的文本是橙色的
 
一些文本 这里的文本是橙色的
 
一些文本

CSS:

ul :first-of-type { color: orange;}

5 :last-of-type

匹配元素的最后一个子元素。

如下例，最后一个

HTML:

 
一些文本一些文本 这里的文本是橙色的
 
一些文本
 
这里的文本是橙色的

CSS:

ul :last-of-type { color: orange;}

6 :nth-child

:nth-child根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数，an+b匹配到的元素示例如下：