---
tags: 大學生體驗營 - 2021 夏季班
---

# 7/28 線上 Slack 助教

## 今日助教輪班時間

Luna： 7/28 (三)
回覆時間：下午 1:00 - 下午 5:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. 羿宣：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/Ann828/pen/OJmQGPY?editors=0110)，我原本預期「CSS 第 53 行會覆蓋mobileNav的max-height，讓手機版出現下拉式選單」，但卻出現「沒有出現選單」，想問下問題出在哪裡？

> 助教回覆：
> SCSS 裡面對於 `.active` 的選擇器是 `.mobileNav .active`，JS 把 `.active` 與 `.mobileNav` 放在同一層，因此無法套用設定
> `.active` 可以不用放在 media query 裡面，因為只有漢堡選單被點擊時，才會套用這個 class
> 另外也提醒你以下幾點：
> 1. header 裡面請用 container 包住，並把沒有設定樣式的 `.wrap` 移除
> 2. 選擇器的巢狀階層越少越好，最多請不要超過五層，越多層越耗費效能，盡量以最近的一層或兩層選擇，也可以改以設定一層 class 去選擇就好，並把類似設定抽出，設定 class 重複使用
> 3. 購物車的數字 3 請不要使用 `<em>` 標籤，`<em>` 標籤是用來強調一段文字中的重點的，通常會在 p 段落裡面使用，請不要在這邊使用，請使用 `<span>` 標籤
> 4. 選單的 icon 請使用[設計稿](https://xd.adobe.com/view/dc5ebe5c-3e56-4981-a010-158b5ded0e72-890d/specs/)指定使用的 [icon](https://material.io/resources/icons/?icon=store&style=baseline)
> 5. 漢堡選單的 icon 不是連結，請使用 button 標籤
> 6. 建議不要把 media query 包在 `.header`，請獨立放在下方設定，並且放於整個 SCSS 的最後，也比較不會有問題

---
<!--
2. **發問同學名稱**：
發問內容

> 助教回覆：
> 回覆內容 -->

(這邊只能由助教編輯，問題請到 thread 上詢問)