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

Question

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

cssinline-styles

3

我只是想回答一个问题，但我遇到了一些不理解的事情！为什么如果我使用内联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>

- CodeWeis

1

在第一个示例中，HTML 无效。style 标签应该放在head中。 - Vucko

p:not(a) 是什么？ p 不能是 a，它既不是类也不是 id。 - Stickers

如果您在开发工具中查看节点树，在您的第一个示例中，样式标签被移动到body标签内部，这意味着p不再是第一个子元素。 - Turnip

更准确地说，body 标签正在从您的代码中删除。 - Turnip

感谢你们所有人，因为有了你们，我今天学到了一些东西。 - CodeWeis

显示剩余2条评论

3个回答

1

虽然在确定特定CSS样式应用于某些元素时，CSS特异性规则中有“:not()”伪类的例外情况，但这里真正的问题是无效标记。

您提供的第一个示例实际上是无效的，因为根据规范，<style>块必须在<head>元素内声明，当这个问题得到纠正时，结果应该是相同的：

糟糕！ 或者这只是因为 Stack Overflow 的编辑器根据 Turnip 的评论在代码示例中剥离了 <body> 标签。

- Rion Williams

1

p:first-child 只会在第一个子元素是 p 标签时渲染。由于某种原因，StackOverflow 代码片段将代码呈现为：

  <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>

第一个子元素是 <style> 标签，它被移动到了 body 中。因此，没有 p:first-child，所以红色不会呈现，只有绿色应用于 <p> 标签。

- amflare

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wero · Accepted Answer

如果您将第一个代码片段复制到文件中并在浏览器中打开，段落确实是红色的，就像第二个示例一样。但由于某种奇怪的原因，如果您在stackoverflow中运行第一个片段，则样式元素会被移动到p元素之前的body元素中（使用firebug进行内省）。现在p不是第一个子元素，因此红色规则不适用。编辑：或者不那么奇怪（请参见Turnip的评论），因为脚本中删除了body标记。