嵌套简单的 CSS 选择器无法按预期工作

Question

我想知道为什么使用以下代码...

p { color: blue; }

div {
  color: green;
  
  p { color: red; }
}

<div class="parent">
  <p class="child">Some text</p>
</div>

...不会产生红色文本。相反，文本颜色为蓝色。

当我添加

&

选择器时...

p { color: blue; }

div {
  color: green;
  
  & p { color: red; }
}

<div class="parent">
    <p class="child">Some text</p>
</div>

...文本变成红色 - 正如预期的那样。

根据我的理解，第一个 CSS 规则集应该扩展到......

div { color: green; }
  
div  p { color: red; }

...这些规则会导致红色文本。

那么，我在这里错过了什么？

Answer 1

@richard-deeming 和 @alohci 帮助指出：所描述的行为可能是由浏览器中的 CSS 解析器限制引起的。

代码应该在较新的浏览器版本上按预期工作。