伪类
定义以冒号开头、表示元素某种状态或结构位置的选择器关键字
伪类用单个冒号书写，分为三大类：状态伪类（:hover、:focus、:checked、:disabled）反映交互与表单状态；结构伪类（:first-child、:nth-child(2n)、:last-of-type）按位置匹配；功能伪类（:not()、:is()、:where()）做逻辑组合。
现代 CSS 新增了一批体验向伪类：:focus-visible（仅键盘聚焦时高亮，鼠标点击不打扰）、:placeholder-shown、:has()（父选择器，CSS 盼了二十年的能力）、:target（锚点命中高亮）。
- :nth-child(n) 公式 a n + b，隔行变色
tr:nth-child(odd)； - :not(.disabled) 做排除比覆盖样式干净；
- :has() 可实现「有子元素时」的父级样式联动。
CSS
tr:nth-child(odd) { background: #f7f7f7; } button:not(:disabled):hover { transform: scale(1.05); } .form:has(input:invalid) { border-color: red; } .btn:focus-visible { outline: 2px solid #2f81f7; }
⚠ 常见误区
- :hover 在触屏上会「粘滞」，移动端交互优先 :active / JS
- :nth-child 从 1 开始计数，不是 0
- :checked 配合 label 可做纯 CSS 开关，无需 JS