css - 为什么在使用 flex 时样式标签也得到 "style"？

Question

当我用这段代码创建一个 html 页面时

     <style> 
          * { 
               display: flex; 
               justify-content:center; 
               align-items:center; 
          } 
     </style>

我得到了这个输出

这是为什么？

[我不是在寻找解决方案，我是在询问为什么我仅在使用“display:flex”时(而不是在使用其他 css 属性时)得到此输出的原因]

Answer 1

假设默认情况下不会显示 head 和 style 当您仅使用此代码创建 html 页面时

<style>
    * { 
       display: flex;
       justify-content:center;
       align-items:center;
    }
</style>

浏览器会生成如下DOM结构

由于您已经为所有元素定义了该样式(通过星号选择器)，因此该规则也适用于 head 和 style 元素，因此它们与你定义的风格

为了防止这种行为，如果这是您的目标，您可以将该样式仅应用于 body 及其后代，例如

<style>
    body, body * { 
       display: flex;
       justify-content:center;
       align-items:center;
    }
</style>

或者简单地指向除head

之外的所有元素

<style>
    :not(head) { 
       display: flex;
       justify-content:center;
       align-items:center;
    }
</style>