为什么内联 CSS 和普通 CSS 之间存在差异

Question

我只是想回答一个问题，但我遇到了一些我不明白的问题！为什么如果我在文件中使用内联 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>

Answer 1

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

但由于某些奇怪的原因*，如果您运行第一个片段在 Whosebug 中，样式元素被移动到 p 元素之前的 body 元素（只需使用 firebug 进行内省）。现在 p 不是第一个 child，因此 red-color 规则不适用。

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

Answer 2

p:first-child 只会在第一个 child 上呈现，如果它是 p 标签。无论出于何种原因，Whosebug 片段将代码呈现为：

  <head>
    <style>
    </style>
    <style type="text/css"></style></head>
  <body>
    <style>
      p:first-child{
        color: red;
      }
      p:not(a){
        color: green;
      }
    </style>
    <p>This a paragraph.</p>
  </body>
</html>

第一个 child 是 <style> 标签，已移入正文。因此，没有 p:first-child，因此红色永远不会呈现，这使得绿色成为应用于 <p> 标签的唯一样式。

Answer 3

虽然有 an exception for the :not() pseudoclass in the CSS Specificity Rules 决定何时将特定 CSS 样式应用于某些元素，但真正的问题是无效标记。

您提供的第一个示例实际上是无效的，因为 <style> 块必须在 <head> 元素 according to the spec 中声明，您会注意到更正后结果应该相同:

Doh! 或者这只是 Stack Overflow 的编辑器根据 Turnip 的评论删除代码示例中的 <body> 标签的问题。 =18=]

为什么内联 CSS 和普通 CSS 之间存在差异

Why is a difference between inline CSS and normal CSS

css

inline-styles