# CSS 星號通用選擇器`*`不可以設定 display 不然畫面會顯示怪東西 ###### tags: `HTML`,`CSS` CSS 選擇器中 `*` 星號代表「通用選擇器」 **Universal selector**， 它會選取到 HTML 頁面上所有的元素。 如果在通用選擇器樣式內加上 `display` 屬性，會導致畫面頂端會出現怪東東。 例如：[這個 CodePen 的示範](https://codepen.io/J_u_d_y/pen/MWPYVNE) --- ![](https://i.imgur.com/CNhSrgO.png) --- 從顯示的怪東西文字都是 CSS 樣式來看，CodePen載入 CSS 樣式的方式，可能是用 `<style>` 標籤把樣式嵌入在 HTML 文件內。所以一旦使用星號通用選擇器，就連 `<style>` 標籤內撰寫的樣式文字也都被顯現出來。 會發現這個奇怪的現象是因為，我切版時習慣一開始先讓所有元素都有一個 outline，讓元素邊界都現身，方便用肉眼判斷元素的位置，不小心把 display 屬性也寫到 * 號內時發現畫面會出現怪東西。 除了 CodePen ，用 VS Code 把 `<style>` 樣式寫在 `<head>`裡面跑 Live Server ，同樣畫面也會出現怪東西。 --- ![](https://i.imgur.com/W1OlqDS.png) ![](https://i.imgur.com/aWAGC4a.png) ## 星號選取器用在單純的 CSS Reset 上比較合適 (參考 CSS Protips：https://github.com/AllThingsSmitty/css-protips#use-a-css-reset) ```css= *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ``` 奇怪的小發現，總之，沒事不要在 `*` 星號通用選擇器內寫 display 屬性就是了。