了解区分伪类伪元素，合理使用伪类伪元素选择器伪类伪元素选择器，自己一直傻傻的分不清，经常混淆，抽个时间来整理一下。关键

伪类伪元素选择器，自己一直傻傻的分不清，经常混淆，抽个时间来整理一下。

划重点

$\color{#FF0000}{区别：有没有创建一个文档树之外的元素}$

伪元素选择器

$\color{#f00}{伪元素选择器创建了一个文档树外的元素}$
W3C规定伪元素选择器使用双冒号区分，伪类使用单冒号

常见的伪元素选择器

1、 ::before在元素之前添加，使用content属性指定插入内容

例：<h1>123</h1>
h1 ::before{
    content:"0";
}

输出：0123

2、 ::after在元素之后添加，用法同::before

3、 ::first-letter在第一个文字或字母

<p>hello word</p>
p ::first-letter{
    color:#foo
}

输出：hello word

4、 ::first-line第一行文字或字母

<p>hello <br> word</p>
p::first-line{
    color:#foo;
}

输出：hello
word

伪类选择器

$\color{#f00}{伪类的操作对象是文档树中已有的元素}$
一般分为状态伪类、结构伪类和目标伪类

常见的伪类选择器

状态伪类

1、:link未访问的链接的状态
2、:visited已访问的链接的状态
3、:hover鼠标滑过的状态
4、:active激活状态
5、:focus获取焦点的状态

结构伪类

1、:first-child选择元素中的第一个子元素
2、:last-child选择元素的最后一个子元素
3、:nth-child(n)选择父元素的一个或多个子元素
参数n分为3种类型
整数型：(1,2,3,4)起始值为1
表达式型：(2n+3),从第三个开始的2的倍数的多个子元素
关键词：odd/even,匹配下标奇数还是偶数的子元素。常用于为奇数和偶数的元素指定不同的背景色

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
li:nth-child(2){
    color:red;
}

输出：第二个li为红色的bbb
注：n的值计算范围是所有的子元素
例：

结果：

红色的内容不再是bbb，而是aaa,n的值是所有的子元素。
4、:nth-of-type(n)它与nth-chilc作用类似，不同的是参数n只计算某种类型的子元素，例如上图的选择器,改为li:nth-of-type(2)，就会选中bbb。
5、:nth-last-of-type(n)作用同nth-of-type,不同的是，参数n从最后一个子元素计算
6、:not可以选择除某个元素之外的所有元素

例：
:not(p)//非段落元素
:not(.box)//不包含class="box"的元素

7、:root根选择器,选择所在文档的根元素，在HTML文档中根元素始终是HTML

目标伪类

:target匹配页面的URL中某个标识符的目标元素

<a href="#box1">跳转到id为"box1"的dom元素</a>
<p id="box1">aaa</p>
:target{
    color:red
}

在点击a跳转后,p元素内部的字体变成红色。

结尾

伪类的本质是为了弥补常规css选择器的不足，可以同时使用多个伪类，但同时只能使用一个伪元素，在使用的同时，注意兼容问题，伪类和伪元素的使用的巧妙会有出乎意料的效果，
例如：::before通常用于与content搭配做一些指引型小三角小箭头。content中的内容参见unicode几何图型列表

更多的巧妙的运用欢迎留言讨论