伪类选择器

一、基本概念

伪类选择器以冒号（:）开头，后面跟着伪类名。它不直接对应DOM中的任何元素，而是用于描述元素的特殊状态或位置。通过使用伪类选择器，可以在不修改HTML文档结构的情况下，为元素添加或修改样式。

二、主要类型

伪类选择器根据其功能和用途，可以分为多种类型，包括但不限于以下几种：

1. 用户交互状态伪类：
   • :hover：鼠标悬停在元素上时的样式。
   • :active：元素被激活（如被点击）时的样式。
   • :focus：元素获得焦点时的样式，常用于表单元素。
2. 文档树位置伪类：
   • :first-child：选择父元素下的第一个子元素。
   • :last-child：选择父元素下的最后一个子元素。
   • :nth-child(n)：选择父元素下的第n个子元素，n可以是数字、关键词（如odd、even）或公式（如2n+1）。
   • :not(selector)：选择不满足指定选择器的元素，作为否定伪类使用。
3. 表单控件状态伪类：
   • :checked：选择已选中的input元素（如单选按钮、复选框）。
   • :valid：选择有效输入的表单元素。
   • :invalid：选择无效输入的表单元素。
   • :empty：选择没有任何子元素的元素（对于表单元素，通常指值为空的元素）。

三、使用场景

伪类选择器在网页设计中有着广泛的应用场景，包括但不限于：

• 增强交互性：通过:hover、:active等伪类选择器，可以为元素添加交互效果，提升用户体验。
• 优化布局：利用:first-child、:last-child等伪类选择器，可以优化元素的布局和排列方式。
• 表单验证：:valid、:invalid等伪类选择器可以用于实现实时的表单验证反馈，提高表单的可用性和用户体验。

eg:在每两个dropdown-item中间加间距4px

  /* 它将自动为除了最后一个.dropdown-item之外的所有.dropdown-item元素添加4px的底部外边距。这样，每两个下拉菜单项之间就会有4px的间距。   */
.dropdown-item:not(:last-child) {  
  margin-bottom: 4px;  
}