---
# System prepended metadata

title: "\U0001F3C57/21(二)每日任務"
tags: [前端工程師學習體驗營]

---

# 🏅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 請問最後字呈現的顏色為什麼？

    ```jsx
    <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，就可以直接取得最高優先權
```htmlmixed=
.title { color: blue !important; }
```
:::
>更多內容請至參考資料 附上：[CSS權重計算機](https://specificity.keegan.st/)
    
3. 根據以下 CSS，在螢幕解析度 600px 時文字的顏色為何？

    ```jsx
    @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 時文字的顏色為何？

    ```jsx
    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)
:::
