CSS伪类和伪元素及应⽤场景

伪类

• 伪类⽤于描述元素的特定状态或⾏为。
• 在选择器后⾯使⽤冒号（:）来表示。
• 常⻅的伪类有 :hover 、 :active 、 :visited 、 :focus 等。
• 伪类选择器根据元素的状态或⾏为来选择元素，例如在⿏标悬停、元素被点击或获取焦点时应⽤样式。
• 伪类选择器可以针对具有特定状态的元素应⽤不同的样式。

应⽤场景：

• 链接悬停效果：使⽤ :hover 伪类选择器来为链接添加悬停状态下的样式，增强⽤户交互体验。
• 表单元素样式：使⽤ :focus 伪类选择器来为表单元素添加获取焦点时的样式，提升⽤户体验。
• 动态表单验证：使⽤ :valid 和 :invalid 伪类选择器来应⽤样式来指示表单中的有效或⽆效输⼊。
• 导航菜单样式：通过 :active 伪类选择器来设置导航菜单项在被点击时的样式。

 

伪元素：

• 伪元素⽤于创建元素中不存在的虚拟元素，并对其进⾏样式设置。 在选择器后⾯使⽤双冒号（::）来表示。
• 常⻅的伪元素有 ::before 、 ::after 等。
• 伪元素选择器通过在元素的内容前或内容后插⼊虚拟元素，来为元素添加额外的内容或样式。
• 伪元素选择器可以在元素的特定位置插⼊内容，为其提供装饰或添加其他样式属性。

应⽤场景：

• 插⼊内容：使⽤ ::before 和 ::after 伪元素选择器来在元素的前后插⼊内容，如在段落前添加引⽤符 号等。
• 图标装饰：使⽤ ::before 和 ::after 伪元素选择器来在元素前后插⼊图标来装饰元素。
• 分割符号：使⽤ ::before 和 ::after 伪元素选择器来在列表项之间添加分割线或其他符号。
• 清除浮动：使⽤ ::after 伪元素选择器来清除浮动以保证容器正确包裹元素。

 

区别：

伪类和伪元素的主要区别在于它们选择的内容不同。伪类选择的是符合特定条件的已存在的元素，⽽伪 元素选择的是⽂档中不存在的虚拟的元素