昨天在写文章的时候发现对伪类和伪元素的概念有些混淆，查阅一番有所收获，记一下~
区别
定义
伪类即假的类，表示被选择元素的某种状态，通常可以添加类来达到效果，如 :hover。
伪元素即假元素，表示被选择元素的某个部分，这个部分看起来像一个独立的元素，换句话说通常需要通过添加元素才能达到效果，如 ::before。
表示方法
在 CSS3 中，规定了伪类用一个冒号（:）表示，伪元素用两个冒号表示（::）。但除了 selection，其余四个伪元素选择器已经在 CSS2 中存在且和伪类用的是一样的单冒号表示的。为了向下兼容，现在的浏览器中伪元素选择器用单冒号和双冒号都可以。在没有兼容问题的情况下，建议 CSS3 标准来开发。
下面举几个栗子来帮助消化上面的文字
例 1：将一行字符串的首字母变成红色
现在不用伪元素应该如何实现？用 CSS slector 选择？想了一晚上也没想出来，既然没法选择也就没法添加一个类来改变首字母的颜色。
<p>I am snow</p>添加元素试试，如下，创建一个元素 span 将首字母包裹起来，进而改变其颜色，成功了。这里，关键点在于我们创建了新的元素达到了::first-letter的作用，且不能通过添加其他类来实现这一效果，因此将::first-letter叫做伪元素而不是伪类。
<p><span style={{ color: red }}>I</span> am snow</p>例 2: 如下要将 I am snow 这句话变为红色
很简单用:first-child，同样添加一个类试试，显然很容易达到同样效果，我们并没有创建新的元素只是添加了一个类.red-line，因此将:first-child叫做伪类而不是伪元素，尽管它和::first-letter在语义上十分相似。
div:first-child {
color: red;
}
或
.red-line {
color: red;
}
<div class='red-line'>
<p>I am snow</p>
<div>这两个例子我从这篇文章《伪类与伪元素的区别》抄录过来的，对这两者的区别也是在看过这两个例子后豁然开朗的 🙂
伪元素
::before：创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。<q>一些引用</q>, 他说, <q>比没有好</q>。q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; }
::after：用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。::first-letter：会选中块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。::first-line：在块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。::section：应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。::slotted()：用于选定那些被放在 HTML模板 中的元素。::placehoder：可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。
伪类
状态类伪类
:link：正常的链接，即未被点击时:visited：点击后:hover：悬停时:active：被激活时:focus：聚焦时
为了可以正确地渲染链接元素的样式，:link 伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active
结构类伪类
:not()：用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类/* 选择所有不是段落（p）的元素 */ :not(p) { color: blue; }:first-child：表示在一组兄弟元素中的第一个元素<div> <p>This text is selected!</p> <p>This text isn't selected.</p> </div> <div> <h2>This text isn't selected: it's not a `p`.</h2> <p>This text isn't selected.</p> </div>p:first-child { color: lime; background-color: black; padding: 5px; }
:last-child：代表父元素的最后一个子元素:only-child：匹配没有任何兄弟元素的元素<main> <div> <i>I am a lonely only child.</i> </div> <div> <i>I have siblings.</i><br> <b>So do I!</b><br> <span>I also have siblings, <span>but this is an only child.</span></span> </div> </main>main :only-child { color: red; }
:nth-child(n)：匹配第n个元素<div class="first"> <span>Span 1!</span> <span>Span 2</span> <span>Span 3!</span> <span>Span 4</span> <span>Span 5!</span> <span>Span 6</span> <span>Span 7!</span> </div>.first span:nth-child(2n+1) { background-color: lime; }
:nth-last-child(n)：倒数第n个元素:first-of-type：表示一组兄弟元素中其类型的第一个元素<article> <div>This `div` is first!</div> <div>This <span>nested `span` is first</span>!</div> <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>This <span>nested `span` gets styled</span>!</div> <b>This `b` qualifies!</b> <div>This is the final `div`.</div> </article>article :first-of-type { background-color: pink; }
:last-of-type：表示了在（它父元素的）子元素列表中，最后一个给定类型的元素:only-of-type：代表了任意一个元素，这个元素没有其他相同类型的兄弟元素:nth-of-type(n)：针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置:nth-last-of-type(n)：特定类型倒数第n个:target：代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配:empty：代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响
表单相关伪类
:checked：表示任何处于选中状态的 radio (<input type="radio">), checkbox (<input type="checkbox">) 或(“select”) 元素中的 option HTML 元素(“option”)<div> <input type="radio" name="my-input" id="yes"> <label for="yes">Yes</label> <input type="radio" name="my-input" id="no"> <label for="no">No</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">Check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">Apples</option> <option value="opt2">Grapes</option> <option value="opt3">Pears</option> </select>input:checked + label { color: red; } input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } option:checked { box-shadow: 0 0 0 3px lime; color: red; }
:disabled：表示任何被禁用的元素:enabled：表示任何被启用的元素:required：表示任意设置了required属性的<input>，<select>, 或<textarea>元素:read-only:表示元素不可被用户编辑的状态（如锁定的文本输入框）:valid：表示内容验证正确的<input>或其他<form>元素:invalid：表示任意内容未通过验证的<input>或其他<form>元素:optional：表示任意没有required属性的<input>，<select>或<textarea>元素使用它:default：表示一组相关元素中的默认表单元素:in-range：代表一个<input>元素，其当前值处于属性 min 和max 限定的范围之内:out-of-range：表示一个<input>元素，其当前值处于属性 min 和 max 限定的范围外:indeterminate：表示状态不确定的表单元素:scope：表示作为选择器要匹配的参考点的元素
其他伪类
:root：匹配文档树的根元素。对于 HTML 来说，:root 表示<html>元素，除了优先级更高之外，与 html 选择器相同:fullscreen：应用于当前处于全屏显示模式的元素。 它不仅仅选择顶级元素，还包括所有已显示的栈内元素:dir()：匹配特定文字书写方向的元素:lang()：基于元素语言来匹配页面元素<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div> <div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div> <div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; } :lang(fr) > q { quotes: '« ' ' »'; } :lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
参考文章：
