ie8仅支持:first-child和:last-child等基础伪类，应优先用class替代；移动端:hover需用@media(hover: hover)隔离或js控制；伪类权重按单元累加，:not()也计权；属性选择器与伪类组合在ie7–8不兼容。
伪类选择器在IE8中不生效怎么办
IE8只支持部分伪类，:nth-child、:not、:last-of-type 全部被忽略，连 :first-child 也仅支持元素节点（不认文本节点）。这不是写法问题，是渲染引擎硬限制。
- 能用类名替代的，优先加 class：
class="first-item"比依赖:first-child更稳 - 必须用伪类时，降级到
:first-child或:last-child（IE8 支持这两个，但语义弱） - 避免嵌套伪类，比如
ul li:first-child a:hover在 IE8 中可能因中间节点计算失败而失效
为什么 :hover 在移动端点击后不消失
移动端浏览器会把第一次触摸模拟成 hover，但不会自动清除状态，导致样式“卡住”。这不是 bug，是规范里允许的行为。
- 给触发元素加
touchstart事件，手动移除 hover 类（如果用了 JS 控制） - 更轻量的做法：用媒体查询隔离，
@media (hover: hover) { a:hover { ... } }，IE/旧安卓不匹配该条件，自然跳过 - 别依赖
:hover做关键交互反馈，比如下拉菜单——移动端应改用:focus或 JS 切换open类
多个伪类连用时权重怎么算
伪类本身不增加权重，但每个都算一个选择器单元。比如 a:hover:focus 是两个伪类，权重等同于 a.class（都是 0,1,1），不是 0,1,2。
-
div#main a:hover权重是 0,1,1,1（ID + 标签 + 伪类） -
div#main a:hover:not(.disabled)是 0,1,2,1（ID + 标签 + 两个伪类） - 容易踩坑的是：以为
:not(.foo)不影响权重，其实它算一个伪类，和:hover平级 - 真要提权？加个无意义的类：
a.my-link:hover比a:hover多 1 级 class 权重，比硬塞!important可维护
伪类和属性选择器组合时的兼容性陷阱
[data-state="active"]:hover 这种写法在 IE7–IE8 完全不识别，因为它们不支持属性选择器，更别说组合了。
- IE8 支持
[attr]和[attr="val"]，但不支持[attr^="val"]等子串匹配 - 组合伪类时，整个选择器只要有一部分不支持，整条规则就被丢弃（不是局部失效）
- 调试技巧：把选择器拆开测试，先确认
[data-state="active"]是否生效，再加:hover - 真实项目中，建议用 BEM 命名 + class 切换，比拼选择器组合更可控
伪类的层级问题，本质是浏览器对 CSS 规范的支持断层+权重计算反直觉。最麻烦的不是写不出来，而是「看起来生效了，上线后某块样式突然不响应」——尤其当开发环境用 Chrome，测试却在微信内置浏览器或老版 Safari 上跑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
