区别
以及实际场景中的应用
1.伪类与伪元素
伪类：例如 :link — :visited — :hover — :active
用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
比如说当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态，虽然它和普通得css类 相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以称其为伪类。
在浏览器检查 伪类的样式的时候 需要点击样式将其状态勾选上才可正常展示
伪元素 ：
例如：::before 或者 ::after
用于创建一些不在文档树中的元素，并为其添加样式，比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式，虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
2.实战应用 —伪类
表单校验
表单的校验中，常会用到 :required、:valid 和 :invalid 这三个伪类。先来看看它们所代表的含义。
- :required，指定具有 required属性 的表单元素
- :valid，指定一个 匹配指定要求 的表单元素
- :invalid，指定一个 不匹配指定要求 的表单元素 ```css input:valid { border-color: green; box-shadow: inset 5px 0 0 green; } input:invalid { border-color: red; box-shadow: inset 5px 0 0 red; }
input中类型为email的校验
符合email校验规则
不符合email校验规则
有required标识，但未填写
折叠菜单<br />缺点：任意时刻必需有一个菜单项是展开状态，单击同一菜单项无法实现隐藏/展示状态切换，无法自适应高度，只能设置固定高度。css
.t-collapse {
>.collapse-body {
display: none;
&:target {
display: block;
}
}
}
**元素的index**<br />当我们要指定一系列标签中的某个元素时，并不需要用JavaScript获取。可以用 `:nth-child(n)` 与 `:nth-of-type(n)` 来找到，并指定样式。但它们有一些小区别，需要注意。<br />类似2n+1的表达式，再或者是 even / odd。
- :nth-of-type(n) 除了关注n之外，还需要关注最前面的`类型`，也就是标签。
- :nth-child(n) 它关注的是：其父元素下的第n个孩子，与类型无关。
<a name="THEIO"></a>
### 3.实战应用 --伪元素
美化选中的文本<br />在网页中，默认的划词效果是，原字色保持不变，划过时的背景变为蓝底色。其实，这是可以用 `::selection` 来进行美化的。看下面这个例子：css
Custom text selection color
::selection { color: red; background-color: yellow; }
```
若有收获，就点个赞吧
0 人点赞
