伪类和伪元素

什么是伪类和伪元素？ 伪类：以冒号(:)开头，用于选择处于特定状态的元素。 伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。 这么说有点抽象，我们来看具体案例。例如下面的伪类语法表达的意思是：文档里的那些已经被用户访问过的 a 标签，当鼠标悬浮在它上面的时候，颜色为红色。 a:visited:hover { color: red; } 效果如下： 可以看到，无论是 visited还是 hover，都表示了 a 标签的某种状态，选择器始终选择的是伪类前面的元素，只不过当出现伪类描述的状态时，样式才生效而已。 注意，上面使用的是无痕浏览器打开的页面，是不可能出现 visited 状态的，因为无痕不记录访问历史，我们可以点击控制台的 :hov 图标手动勾选 :visited 和 :hover 来模拟 a 标签「已访问」和「悬浮」两种状态。 我们再来看一下伪元素的案例，下面的语法表达的意思是： div 标签里面首字的颜色为红色。 div::first-letter { color: red; } 效果如下： 与伪类不同的是，首字并不是 div 元素的某种状态，而是浏览器创建出来的一个虚拟的元素，我们可以在上图的右下角看到 Pseudo ::first-letter element提示，相当于浏览器自动选中了「彻」字。 注意：::first-letter 伪元素只作用于块状元素上面，如果把 div 换成 span，就无法选中首字了，除非手动设置 span 的 display 属性为 block 或 inline-block 等块状值。 从上面的案例当中，我们可以得出两个结论： 伪类用于向某些已经存在的选择器添加特殊效果（当状态改变时） 伪元素用于将特殊效果添加到不存在的虚拟元素中（浏览器自动创建） 也就是说伪类的本质还是类（class），作用于标签本身，只不过限定了状态条件；而伪元素的本质是元素（element），作用于该虚拟元素的内容本身。 伪类有哪些？ 按照功能，可划分为以下几类： 动态伪类：:visited、:focus、:hover等 状态伪类：:disabled、:empty、:required 等 结构伪类：:first-child、:nth-of-type等 其他伪类：:target、:lang、:not()等 下面的表格详细记录了各种伪类及其描述： 伪类 描述 兼容性 :active 元素处于活动状态时 ✅ :focus 元素已获取焦点时 ✅ :hover 元素处于悬浮状态时 ✅ :link 链接未访问时 ✅ :visited 链接已访问时 ✅ :first-child 元素是首个子元素时 ✅ :last-child 元素是最后一个子元素时 ✅ :nth-child() 元素是第 n 个子元素时 ✅ :nth-last-child() 元素是倒数第 n 个子元素时 ✅ :only-child 元素是唯一子元素时 ✅ :first-of-type 元素是首个特定类型的子元素时 ✅ :last-of-type 元素是最后一个特定类型的子元素时 ✅ :nth-of-type() 元素是第 n 个特定类型的子元素时 ✅ :nth-last-of-type() 元素是倒数第 n 个特定类型的子元素时 ✅ :only-of-type 元素是唯一的特定类型的子元素时 ✅ :not 不满足指定条件时 ✅ :target 元素 id 匹配到哈希值时 ✅ :root 元素是文档树的根元素时 ✅ :lang() 匹配到指定语言时 ✅ :empty 元素处于没有子元素状态时 ✅ :invalid 和 :valid 表单项是否有效 ✅ :required 和 :optional 表单项是否必填 ✅ :in-range和 :out-of-range 表单项是否超出范围 ✅ :read-only和 :read-write 表单项是否只读 ✅ :enabled和 :disabled 表单项是否禁用 ✅ :fullscreen 当前处于全屏显示模式时 ⚠️ :blank 输入框处于输入为空状态时 ❌ :dir() 匹配到特定文字书写方向时 ❌ 上表中的兼容性表示： ...