爲什麼使用flex的樣式標籤也獲得「樣式」？

Question

當我創建一個HTML頁面的代碼

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

我得到這個輸出中

這是爲什麼？

[我不是在尋找解決方案，我要問爲什麼我使用的時候得到這個輸出的原因「顯示：彎曲」只（不使用其他CSS道具時）

Answer 1

請刪除*簽收前CSS屬性。 如果你想在所有應用樣式屬性，你必須使用 <style>

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

</style> 

，如果你在.css文件中添加CSS類和屬性，你可以使用

*{ display: flex; justify-content:center; align-items:center;} 

Answer 2

由於頭部和風格的默認從不顯示當您使用此代碼創建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> 

Answer 3

的*所有元素選擇所有元素，包括html，head，style，body和所有其它的標籤...不知何故，似乎有問題。看到這個demo。

解決辦法是隻針對身體內的所有元素：

body * { 
    display: flex; 
    justify-content:center; 
    align-items:center; 
}