对伪类选择器和伪元素选择器的理解
伪类和伪元素，顾名思义，他们不是真正的类和元素，而是开发者为了方便开发，设计的一类起到和类与元素相同的作用的东西，但是他们每个都有不同的含义，是浏览器规定的一些种类元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .first-line{ color: red; } p::first-line{ color:yellow; } </style> </head> <body> <div>hhhhhhhhhhhhhhhhhhhh <br> <p> <p class="first-line">c</p>eskhnfrisn </p> </div> </body> </html>
（该例子可以看出：：first-line这个伪元素实现的底层，实际上和给p加一个类，使用类选择器的底层是一样的，（伪元素和伪类选择器的底层都可转化为其他选择器选择）但实际开发中，我们若是直接用类选择器设置样式可能会影响到其他样式效果，所以我们使用伪类和伪元素选择器 ，这样便可减少许多不必要的麻烦）
伪类选择器
:firt-child----某一元素作为任何元素的第一个子元素
:last-child---某一元素作为任何元素的最后一个元素
:nth-child(num/odd/even)---某一元素作为任何元素的第几个元素/奇元素/偶元素
(以上三个较其他比较常用)
:first-of-type---某种元素作为父元素的第一个子元素
:last-of-type---某种元素作为父元素的最后一个子元素
元素状态相关的伪类选择器
:link 未被访问的状态
:visited 已访问过的状态
:hover 鼠标悬停的状态
:active 活动的状态（鼠标按下的状态）
（以上4个常用）
：focus 聚焦的状态
：checked 用户选中的单选按钮或者多选按钮
：default 默认选中的单选按钮或者多选按钮
：enabled 、 ：disabled 可用的表单控件、禁用的表单控件
：valid 、 ：invalid 验证通过的、不验证通过的
：required 、 ：optional 必填的和选填的
:in-range 、 :out-of-range 在范围内的、不在范围内的
（测试样例如下 注意覆盖！）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p:first-child{ background-color: blue; font-size: 60px; }/*p作为父元素id为aaa的div的第一个子元素*/ #bbb:first-child{ background-color: sandybrown; }/*div不是作为父元素的第一个孩子所以没有改变*/ #bbb:last-child{ background-color: pink; }/*id为bbb的div是id为aaa的div父元素的最后一个子元素*/ p:nth-child(3){ background-color: red; font-style: italic; }/*p作为其父元素的第三个子元素*/ p:first-of-type{ background-color: black; } span:first-of-type{ background-color: cadetblue; } #bbb:last-of-type{ background-color:yellow; } a:link{ font-size: 60; } a:hover{ color: chartreuse; } a:visited{ color: red; } a:active{ color: black; } </style> </head> <body> <table> <div id="aaa"> <p>测试1 <span> test</span> </p> <p>测试2</p> <p> 测试3 <p>测试4</p> </p> <a href="1.html">点击一下</a> <div id="bbb" style="width: 500px;height: 600px;border: 1px solid red;"> hhhhhhhhhhhh </div> </div> </table> </body> </html>
伪元素选择器（结构 ：：伪元素名称）
：：first-letter 第一个元素
：：first-line 第一行
（上述只能用于块级元素）
：：before 在当前元素之前添加东西（属性 content：''/url()）
：：after 在元素之后添加东西
：：selection 选择
（测试样例如下注意覆盖！）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p::first-letter{ background-color: red; } div::first-letter{ background-color: royalblue; } span::first-letter{ font-size: 70px; }/*只能用于块级元素*/ p::first-line{ background-color: sienna; } </style> </head> <body> <div id="aaa"> <p>测试1 <span> 那件粉红色肯德基test</span> </p> <p>测试2</p> <p> 测试3 <p>测试4</p> </p> <a href="1.html">点击一下</a> <div id="bbb" style="width: 500px;height: 600px;border: 1px solid red;"> hhhhhhhhhhhh </div> </div> </body> </html>
