css - 为什么内联 CSS 和普通 CSS 有区别

我只是想回答一个问题，但我遇到了一些我不明白的事情! 为什么如果我在文件中使用内联 CSS 或 CSS，如本例中的颜色，结果就不一样!

代码相同，但第一段是绿色，第二段是红色!

我真的不明白为什么？

谢谢

<head>
 <style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
</head>
<body>

<p>This a paragraph.</p>

</body>

p:first-child{
color: red;
}
p:not(a){
 color: green;
}

<body>

<p>This a paragraph.</p>

</body>

最佳答案

如果您将第一个片段复制到一个文件中并在浏览器中打开它，该段落确实与第二个示例中一样是红色的。

但由于某些奇怪的原因*，如果您在 stackoverflow 中运行第一个代码段，样式元素将被移动到 p 元素之前的 body 元素(只是用 firebug 进行反省) .现在 p 不是第一个 child ，因此红色规则不适用。

*编辑:或者没有那么奇怪(参见 Turnip 的评论)，因为 body 标签已从脚本中删除。

关于css - 为什么内联 CSS 和普通 CSS 有区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36610278/