macOS Sierra中CSS通用兄弟选择器出现异常行为

这种时好时坏的问题确实挺闹心的，我来帮你拆解可能的原因和对应的解决办法：

可能的根源分析 #

首先明确：CSS规范里完全允许兄弟选择器~两侧加空格，div ~ p和div~p都是合法且功能等价的写法，所以问题大概率不是语法本身的问题，而是环境或工具的小bug导致的。

针对性解决步骤 #

1. 检查编辑器的"隐形字符"问题 #

很多时候撤销操作后，波浪号两侧的空格可能被编辑器偷偷换成了非半角空格（比如全角空格、零宽空格、制表符），这些字符会被CSS解析器当成选择器的一部分，导致选择器匹配失败。

• 打开编辑器的"显示不可见字符"功能（比如VS Code可以按Ctrl+Shift+P搜索"Toggle Render Whitespace"开启），仔细看撤销后的波浪号两侧是不是标准的半角空格（显示为小圆点）。如果是其他符号，手动替换成半角空格即可。

2. 强制清除浏览器缓存 #

有时候你修改了CSS并撤销，但浏览器还在缓存旧的失效版本，导致看起来是代码的问题，实际是缓存的锅。

• 按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新页面，跳过缓存加载最新的CSS文件。

3. 排查预处理器（如果使用了） #

如果你用Sass、Less这类预处理器编译CSS，某些旧版本可能存在兄弟选择器空格处理的bug。

• 尝试升级预处理器到最新稳定版，或者直接写原生CSS测试，看是否还会出现这个问题。

4. 验证最小化案例排除干扰 #

项目中其他CSS代码可能存在冲突，你可以写一个极简的测试页面来验证：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 测试带空格的写法 */
    .box ~ .text {
      color: blue;
    }
    /* 测试不带空格的写法 */
    .box~.highlight {
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="box">测试盒子</div>
  <p class="text">带空格选择器的文本</p>
  <p class="highlight">不带空格选择器的文本</p>
</body>
</html>

如果这个最小案例里两种写法都正常生效，说明问题出在你的项目代码或工具链上，需要进一步排查项目中的CSS嵌套、@import规则或其他可能的冲突。

5. 检查文件编码 #

确保你的CSS文件是UTF-8无BOM编码，BOM头可能会导致CSS解析器在开头出现异常，影响后续选择器的解析。

内容的提问来源于stack exchange，提问作者Fpunkt