CSS Selector 選擇器 - Front End 網頁前端工程教學

[@AK-di6xs]

感謝彭彭老師~~ ----html----- CSS Selector 選擇器 文章第一段落的標題 今天的天氣真是不錯 文章第二段落的標題 今天的天氣真是不錯 文章第三段落的標題 今天的天氣真是不錯 ----CSS---- /* 標籤名稱選擇器 */ body{background-color: #cccccc;} /* ID 選擇器 */ #title-1{text-decoration:line-through} /* class選擇器 */ .title{ font-weight: bold; font-size: 24px; border: 1px solid; margin-bottom: 10px; } .content{color: #051b38;border: 1px dashed blue;padding: 10px;margin-top: 10px;width: 50%;height: 400px;} .keyword{color: green}

[@cwpeng-course]

:)))))

[@姚字丞]

Inspect 來臨摹是最棒的學習方式了！

[@cwpeng-course]

讚讚，加油加油 :)

[@MrHjharn]

老師講解的非常清楚！ 建議： 請將您的影片能分門別類的 由淺入深的編好順序讓讀者閱讀 學習。這個動作絕對能創造出 更多的追隨者！與訂閱績效！ 謝謝。

[@cwpeng-course]

感謝您的肯定、回饋和建議哦 :)

[@朋喵]

我想請教一個問題， 之前的影片有使用table標籤建立表格，當時老師使用table的屬性來設定樣式，但css好像不支援像是cellpadding的那些屬性(被畫紅線+沒效果)，請問該如何使用選擇器設定table的那些樣式？

[@cwpeng-course]

可以針對 td 標籤設定 css 的 padding 就會有類似的效果 ~

[@金城剛志-u8u]

完全明瞭..

[@cwpeng-course]

讚讚 ~

[@giraffe_qq]

老師你好 先謝謝老師分享這麼棒的教學 目前每天都會跟著上2-3堂課 這邊有個小疑問 class selector和ID secector目前感覺起來是非常相似 只是屬性上一個用class一個用id 爬了其他文章後說id在整個網頁中只能使用一次 而class可以重複使用 這樣子的話class應該能比較靈活運用，想用在哪就用在哪 ID只能用在我確定某個位置的地方 我的疑問是： 這樣什麼時候會用到ID呢？ 感覺全部都可以用class處理就好了

[@cwpeng-course]

確實可以都用 class 就好，有時候只是 id 更精準的指到特定不重複的標籤，語意上比較漂亮容易懂，就會使用 id。

[@蔡潮宗]

老師不好意思 請教一下 最後link 外部css檔案時 ,中間type=" text /css" 是否不用加入, 因為我常是第一次原先html跑不出來css 刪掉type那句就順利跑出來 , 是後續編輯器有修改與法規則嗎

[@cwpeng-course]

可以不加，若要加的話就要寫對 text/css 中間不應該有任何額外的空白

[@王永豪-m6i]

老師我想問個問題，為什麼複製到大括號，程式碼卻變成白色的。

[@cwpeng-course]

我也不知道耶 XDDDD 編輯器的樣式設定吧 ~

[@王永豪-m6i]

謝謝老師，問題我已經解決了

[@哈普-c1r]

老師如果用python flask執行網頁 那樣式檔案要放在哪個資料夾 templates嗎?

[@cwpeng-course]

放在靜態檔案的資料夾，就會有對應的網址可以調用。

[@Jason-ki8gr]

彭彭老師你好，可以說明關於css.less的注意使用事項嗎，有時候跟著其他老師使用css.less操作，到後面都會跑掉，而全部又要重新對一次😢，謝謝老師

[@cwpeng-course]

我本身沒有使用過 less，所以沒辦法分享相關的議題哦 ~

[@justinchen3737]

請問老師，哪時候用class 選擇器？哪時候用id選擇器？

[@cwpeng-course]

其實都可以，但建議優先使用 class 選擇器，真的不方便再去使用 id 選擇器 ~

[@dianechen3197]

之前有出一個flexbox排版的影片。裡面說可以設置多層的item。我想請問一下如何設置多層的item，想要換背景顏色，卻跑不出來 2.如何重複呼叫main製作不同背景設定。重複呼叫時，內容物會並排於之前的main裡，無法分為兩個。

[@cwpeng-course]

光是文字描述看有點難以回應，排版到底要怎麼做，得把想得到的結果畫出來，目前的 HTML 結構和 CSS 設置都要仔細地確認每個細節，才有辦法針對狀況給出對應的解法，比較好的辦法是給一個線上可以分享的程式碼，這樣無論是問誰，或是在社群中發問，都比較容易得到答案。

[@jerryke3354]

老師目前我也在學習css選擇器，但有三個問題想詢問： 1.群組式選擇器(群組式同一類型的像h1、p、div標籤這種)， 若在群組中加空格會影響顯示效果嗎，還是只是美觀較具可讀性? EX：h1, p, div {樣式內容}與h1,p,div {樣式內容}會有差別嗎? (已知後代選擇器如:p a {樣式內容}關係，單就標籤後面有符號的話有無加空格是否無差別) 2.複合型選擇器(複合型像a>b、a+b、a~b這種)，是否也和群組選擇器相同加空白鍵只是美觀 EX：a~b {樣式內容}與a ~ b {樣式內容}會有差別嗎? 3.大括號前面一定要有空格嗎? EX：span {樣式內容}與span{樣式內容}有差別嗎? 因為也有看過其他網路資源有加空格也有不加空格的，再麻煩老師解惑了~

[@cwpeng-course]

1. 沒有差別。 2. 對的。 3. 都可以。

[@jerryke3354]

了解，謝謝老師回覆~

[@Starburst7377.]

請問老師蘋果電腦用大括號都會有紅線 在下面 請問有辦法解決嗎 謝謝您

[@cwpeng-course]

這得看你使用的開發工具是什麼，通常都是這些工具提供的輔助訊息 ~

[@josnlidonny]

老師您好 聽完您的教學課程 受益良多! 想請問Class與Id的使用上有什麼限制嗎? 或者是在哪個特殊情況會哪一個?

[@cwpeng-course]

通常 class 用來對應 CSS，id 在網頁中通常不會重複，比較適合給 JavaScript 取標籤使用。

[@halrison]

如果某個元素在網頁中只出現一次，且未來不會再增加同樣的元素，會偏好使用id選擇器還是class選擇器

[@taiping168]

id

[@cwpeng-course]

感謝 @taiping168 的分享 :)

[@feliciasu019]

@@cwpeng-course 老師, 想了解是為什麼呢?

[@夜空-w8y]

老師，我有一點關於Python的問題想請教一下。 我在執行Json格式檔案的時候無法順利執行。 以下是我的程式： Json檔案：learn.json { "name":"Hello", "version":"1.2.3" } 執行檔案：json.py import json with open("learn.json",mode="r") as learn: data=json.load(learn) print(data["name"]) print(data["version"]) 執行的時候顯示錯誤。 我已經按照你寫的程式寫了，但還是無法執行。 希望老師幫我解答一下

[@swarftechau3163]

報錯信息是甚麼?

[@夜空-w8y]

@@swarftechau3163 我剛剛又去跑了一次，結果成功了！ 我用著跟昨天一樣的檔案，一樣的程式。 這是真的有點奇怪，但至少解決了。 但不管怎麼樣，謝謝你

[@cwpeng-course]

建議在相關的影片留言哦，不過有解決就好了 :)

[@黃色小鴨-v9q]

老師你怎麼這麼會教

[@cwpeng-course]

謝謝哪，希望對你有幫助 :)

[@李茵茵-h6j]

老師 感謝您提供如此詳細免費視頻教學，但不好意思英文的部分還是能不要誤導觀眾，class是念克拉斯klas 不是克雷斯＾＾“，謝謝

[@Wang_GG_]

克雷斯 是美式發音 克拉斯是英式發音

[@cwpeng-course]

我猜我是 Taiglish 台式發音 XDDD 感謝大家的指教哪 :)))

[@巨錘瑞斯-p3i]

你也太無聊了吧...英文是世界的語言，這種口音上的差別外國人根本不在意

[@太囂剛了]

克拉斯其實是日式發音啦，哈哈，含兜路，水利控，後素共，聽得懂就好了，語言博大精深，小小的台灣台語都各自表述了