macOS Sierra CSS 通用兄弟组合器 - 奇怪的行为

Question

波浪号周围带有 'spaces' 的代码段无效。

  h3 ~ p {
   color: red;
  }

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title></title>

</head>
<body>
<h3>this does not work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>

这个没有空格的片段确实有效。

  h3~p {
   color: red;
  }

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title></title>

</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>

撤消将恢复为无效，而当我在波浪号周围放置 'new' 空格时它会起作用。

  h3 ~ p {
   color: red;
  }

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title></title>

</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>

因为 CSS 总的来说有让我想撕掉头发的力量，如果有人能帮助我避免这些问题就太好了。

Answer 1

这是因为在您的第一个示例中波浪号之后有一个 non-breaking space。如果您不小心按了 option+space 而不是 space，它就会出现。

macOS Sierra CSS 通用兄弟组合器 - 奇怪的行为

macOS Sierra CSS general sibling combinator - weird behaviour

css

macos

tilde