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

# 7/8 線上 Slack 助教

## 今日助教輪班時間

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

## 發問規範

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

## 注意

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

## 問題

1. 玉凌：
老師助教同學們好，這是我的 [Codepen](https://codepen.io/ruby376758123/pen/yLbOrGG)。
我原本預期「CSS 第11行會讓圖片水平置中」，但卻出現「預期外的結果是圖片一直貼左」，想問下問題出在哪裡？

> 助教回覆：
> 因為 `vertical-align` 是用來設定**垂直**對齊的屬性，才無法讓圖片水平致中哦，附上[用法說明](https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align)給你參考。
> 有看到你在 ul 有設定 `display: flex;` 猜測你是想利用 flex 的方式排版，如果要呈現水平置中的效果，可以在 ul 設定 `justify-content: center;` 達成，這邊附上[用法說明連結](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content)與 [Flexbox Playground](https://codepen.io/peiqun/pen/WYzzYX) 給你測試操作與參考看看。
> 修改範例也提供給你參考：
> ```htmlmixed=
> ul{
> display: flex;
> justify-content: center;
> }
> ```
---

2. Jack：
老師助教同學們好，這是我的codepen
https://codepen.io/JackChen89/pen/MWmeYgQ
我原本預期CSS第19行的效果會蓋掉CSS第6行的效果(字體顏色，原本想法是自定義class權重>html標籤權重)，但卻沒有被蓋掉，想問下問題出在哪裡？

> 助教回覆：
> 因為 CSS 設定時，會採用就近原則，也就是以最接近的樣式設定為主。這邊因為 `.contact` 離 span 太遠，所以會優先採用 span 的設定。
> 你提到的權重則會是在都有選擇 span 的狀況下，才會採用的決定方式，像是：
> ```htmlmixed=
> .contact span{
> color: white;
> }
> span{
> color: red;
> }
> ```
> `.contact span` 的權重就會是 10 + 1 分，`span` 則會是 1 分。
> 如果你希望 CONTACT 能夠繼承 `.contact` 的樣式設定，可以把 span 標籤拿掉就好。通常 span 會用在字串中有額外設定樣式的字串，所以拿掉 span 是沒有關係的。
> 這邊提供一些參考連結給你參考，如果還是不太懂的話，歡迎再發問。
> - [CSS 繼承](https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance)
> - [CSS 層疊性 ( 覆蓋性 ) 規則](https://learningnow.com.tw/css-features/#CSS%20%E5%B1%A4%E7%96%8A%E6%80%A7%20(%20%E8%A6%86%E8%93%8B%E6%80%A7%20)%20%E8%A6%8F%E5%89%87)
> - [CSS優先級](https://zh.codeprj.com/blog/6912c11.html)
>
> 另外建議你聯絡方式可以改用標題標籤，因為他本身其實算是一個標題，分隔線可以在標題標籤下用 border-bottom 設計，可以減少 div 讓結構更加簡潔。

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