# 🏅7/21(二)每日任務
###### tags: `前端工程師學習體驗營`

本日報到 Code：`vzQfpDNm1EvK`

## 問題

1. 請問下列何者是正確的 media query 語法？

A. @media (min-width: 600px) {...}
B. @media min-width: 600px {...} 
C. @media (min-width = 600px) {...}
D. @media min-width = 600px {...}

### 答案：A
:::success
Feature 必須要使用括號( )包覆
:::

---

2. 根據以下 CSS 請問最後字呈現的顏色為什麼？

    <div id="color-id" class="color-class">Color</div>

    <style>
    	.color-class { color: blue };
    	#color-id { color: red };
    	div {color: yellow };
    </style>

A. 藍色
B. 紅色 
C. 黃色
D. 黑色
### 答案：B
:::success
* **重點**：先比權重，再比順序
* **套用方法**：行內(inline)套用CSS ＞ HTML內部載入CSS ＞ 外部載入CSS
* **選擇器類型順序**：id > class > 標籤元素
* **撰寫順序**：後面的敘述 > 前面的敘述
:::
:::danger
#### 只要在選擇器的屬性後面加上 !important，就可以直接取得最高優先權

.title { color: blue !important; }

:::
>更多內容請至參考資料 附上：[CSS權重計算機](https://specificity.keegan.st/)

3. 根據以下 CSS，在螢幕解析度 600px 時文字的顏色為何？

    @media (min-width: 576px){
        p { color: red };
    }
    @media (min-width: 768px){
        p { color: black };
    }
    p { color: yellow };

A. 紅色 
B. 黑色
C. 黃色
D. 藍色
### 答案：C
:::success
先比權重再比順序
:::

---

4. 根據以下 CSS，在螢幕解析度 600px 時文字的顏色為何？

    p { color: yellow };
    @media (min-width: 576px){
        p { color: red };
    }
    @media (min-width: 768px){
        p { color: black };
    }

A. 紅色 
B. 黑色
C. 黃色
D. 藍色
### 答案：A

---

5. 針對響應式圖片的設定，應該幫 img 標籤加上什麼語法？

A. max-width:100%
B. width:100%
C. max-width: 100px
D. width: 100px
### 答案：A

---

## 參考資料
:::spoiler
[參考資料一：CSS的優先順位](https://medium.com/ui-ux%E7%B7%B4%E5%8A%9F%E5%9D%8A/css%E7%9A%84%E5%84%AA%E5%85%88%E9%A0%86%E4%BD%8D-cfb859e988bd)
[參考資料二：談一下 CSS Specificity](https://askiebaby.github.io/css-specificity/)
[參考資料三：MDN-优先级](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity)
:::