CSS中的伪类与伪元素

伪类

CSS 伪类是用来添加一些选择器的特殊效果，使用:表示

伪类分类

• 状态类：:link、:visited、:hover、:active、:focus
• 结构类：:first-child、:last-child、:nth-child、:nth-of-type
• 表单类：:checked、:disabled、:valid、:required
• 语言类：:dir、:lang

伪元素

CSS 伪元素也是用来添加一些选择器的特殊效果，在 CSS3 中使用::表示，为了兼容浏览器，也可以使用:表示

伪元素分类

• 状态类：::before、::after
• 结构类：::first-letter、::first-line
• 表单类：::placeholder
• 语言类：::backdrop

伪元素与伪类的区别

1.语法

• 伪类使用:
• 伪元素使用::

2.数量

• 伪类可以使用多个
• 伪元素只能单个使用

3.位置

• 伪类可以放在任意位置
• 伪元素只能放在最后

4.类与元素

• 伪类用于修饰DOM元素
• 伪元素可以创建对象，但不占用DOM节点

5.使用场景

• 伪类使用场景多
• 伪元素使用场景少