伪类选择器

这类选择器用于选择特定的状态：例如悬浮、被访问、 格式为：

其他选择器:伪类 {}

1. 状态伪类

• 交互状态：

  a:link {}     /* 未访问链接 */
  a:visited {}  /* 已访问链接 */
  a:hover {}  /*悬停*/
  a:active {}  /* 指点击开始但尚未释放时的状态 */
  button:hover { transform: scale(1.05); }
  input:focus { box-shadow: 0 0 3px blue; }/*获得焦点*/
   

2. 结构伪类

• 位置选择：

  li:first-child {}    /* 第一个子元素 */
  tr:nth-child(2n) {} /* 偶数行 */
  p:last-of-type {}   /* 同类型最后一个 */

• 公式应用：

  :nth-child(3n+1)       /* 1,4,7... */
  :nth-last-child(-n+3)  /* 最后三个 */

3. 表单伪类

input:checked + label { color: green; }
input:disabled { background: #eee; }
input:required { border-left: 3px solid red; }

---