# HTML、CSS 觀念筆記
> CSS權重規則：先看權重在看順序
> HTML 標籤 1 xp
> 類別選擇器 10 xp
> id 選擇器 100 xp #永遠不要用id，寫CSS樣式不需要id。讓後端工程師綁template樣版有時會用到id，或是用Javascript做指定樣式
> elemant 1000 xp #寫在HTML裡的style樣式，做Banner或是輪播效果可能會需要，後端做到前端的時機以及Javascript
> !important 10000 xp ex: h1 { color: black !important;}
### HTML vs 類別選擇器
```
<p class="title1 title2">猜猜看</p>
```
```css=
<!-- CSS -->
p{
color: pink;
}
.title1{
color: pink;
}
.title2{
color: blue;
}
```
> Answer：先看權重在看順序，顏色一樣是blue
### 相同類別選擇器
```
<p class="title2 title1">猜猜看</p>
```
```css=
<!-- CSS -->
.title1{
color: pink;
}
.title2{
color: blue;
}
```
> Answer： p標籤內的title1 title2對調顏色一樣是blue
### ID vs 類別選擇器
```
<h1 id="Thetitle" class="title1 title2">猜猜看</h1>
```
```css=
<!-- CSS -->
#Thetitle{
color: green;
}
.title1{
color: pink;
}
.title2{
color: black
}
```
>Answer: id權重大於類別選擇器
{"metaMigratedAt":"2023-06-16T00:21:25.469Z","metaMigratedFrom":"Content","title":"HTML、CSS 觀念筆記","breaks":true,"contributors":"[{\"id\":\"e01b985b-f4f4-4da0-821e-58d532eb0820\",\"add\":957,\"del\":128}]"}