---
# System prepended metadata

title: CSS 星號通用選擇器`*`不可以設定 display 不然畫面會顯示怪東西
tags: [HTML, CSS]

---

# 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 屬性就是了。