li :hover 和 li:hover 完全不同：前者匹配 li 内部处于 hover 状态的后代元素，后者匹配 li 自身 hover 状态；空格是关系运算符，非格式符号，错误使用会导致样式失效或权重异常。
li :hover 和 li:hover 完全是两回事
浏览器解析选择器时，空格不是“可有可无的格式”，而是明确的关系运算符。写成 li :hover，等于告诉浏览器：“找所有在 li 元素内部、且自身处于 :hover 状态的后代元素”。它不匹配 li 自身，哪怕你把鼠标悬停在它上面——因为 li 本身没有子元素被 hover（比如里面只是文本或 span 但没 hover）。
而 li:hover（无空格）才是“当这个 li 元素自己被悬停时生效”。这是绝大多数导航、卡片交互的真实需求。
- 常见错误现场：
nav a :hover→ 意图是悬停链接，结果匹配的是a内部某个子元素的 hover 状态 - 正确写法：
nav a:hover，直接作用于链接本身 - 空格还可能触发意外继承：如果
li里嵌套了button，li :hover会匹配到button:hover，但你根本没想控制按钮
后代选择器（空格）和子选择器（>）都依赖真实 DOM 结构
空格代表“任意深度后代”，> 代表“直接子元素”。两者都会严格按 HTML 层级匹配。如果你写的 .card .title，但实际 DOM 是 <div class="card"><h2 class="title">…</h2></div>，那它能生效；但如果结构变成 <div class="card"><section><h2 class="title">…</h2></section></div>，.card .title 依然匹配（因为 h2 是 .card 的后代），而 .card > .title 就完全失效（h2 不是 .card 的直接子元素）。
- 检查方式：在 DevTools 中右键目标元素 → “Edit as HTML”，看清真实嵌套关系
- 不要靠“感觉”写选择器，DOM 结构变了，带空格的选择器就可能突然不工作
-
&在 SCSS 中会完整展开空格，例如.card { &__header { … } }编译为.card__header；但若写成.card { & .header { … } }，则编译为.card .header，语义完全不同
空格还会干扰 CSS 优先级计算和调试判断
带空格的选择器权重更高：比如 div .btn 是 0,0,1,1（一个类 + 一个标签），而 .btn 只是 0,0,1,0。这看似有利，实则埋雷——一旦第三方库或框架用了更具体的选择器（如 .ant-btn-primary），你的 div .btn 很可能被覆盖，且你根本没意识到是自己多加了个空格抬高了权重，反而误判为“样式被压了”。
- 开发者工具里看到属性被划掉？Hover 到那条被删样式上，看提示的 specificity 值，确认是不是空格导致权重虚高
- 用
querySelector调试时，document.querySelector('li :hover')永远返回null（因为:hover是运行时状态，不是静态属性），但document.querySelector('li:hover')同样无效——说明你该换思路：用matches(':hover')检测当前元素是否处于 hover 状态 - 媒体查询、伪类组合中加空格更危险：
@media (min-width: 768px) .nav :hover这种写法会让整个规则因语法不合法而被浏览器静默丢弃
空格不是排版符号，是 CSS 选择器语法的核心操作符。写错一个空格，相当于改写了整条规则的匹配逻辑。最稳妥的做法是：除非你明确需要后代/父子关系，否则所有基础交互伪类（:hover、:focus、:active）都紧贴元素名书写，中间零空格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
