網頁前端工程入門：CSS 選擇器 - 詳細使用介紹 By 彭彭

[@涼萌萌]

節奏感十足。完全沒有浪費一分一秒的教學影片。 很適合下班想自修的上班族參考。 很棒

[@cwpeng-course]

謝謝你的鼓勵和回饋 :)

[@chunchinglin4358]

我真的很開心有生之年能看到這樣優質的教學影片 讓自學程式的人有大大的收穫

[@cwpeng-course]

謝謝你的回饋，很高興對你有幫助 :)

[@haoyun4884]

真的很感謝老師的教學 非常詳細 針對無基礎的人 也可以輕易上手 更重要的是 還會貼心幫我們總結課程內容 有夠優質的教學 ~!! 推薦給所有人 ~~~ 上完這系列要去進攻老師的後端教學了 !!

[@cwpeng-course]

謝謝你的回饋和支持哦 :) 加油加油 ~~~~

[@EugenneHsuTW]

彭彭大師的教學簡單又清楚,受惠良多大大地! 真是太感謝彭彭大師!

[@cwpeng-course]

彭彭就好了 XDDD 謝謝哪 :)

[@lyf7835]

謝謝老師，講得超好理解！ 老師有一種魔力欸，每次我看了很多教學，但我只聽的懂老師說的😆

[@cwpeng-course]

這個說法聽起來好神祕哦 😆😆 謝謝你的回饋哪 :)

[@高國原-v4e]

喔, 有反應, 這非常的好用, 失去焦點,取得焦點, 真有趣的教學。

[@cwpeng-course]

XDDDDD

[@mr_yeti]

寫程式生涯第二天覺得老師講的超好的~

[@cwpeng-course]

謝謝哪 :)

[@susan810728]

好開心有個這麼有條理的教學~~

[@cwpeng-course]

哈哈哈 :)

[@pizzacats]

謝謝老師～～～～我正一步一腳印的在學習非常實用

[@cwpeng-course]

加油哦 :)

[@ednaho5536]

謝謝彭彭老師, 您令學習變得很有趣!

[@cwpeng-course]

哈哈哈哈，好哦 :)

[@a38357407]

感謝老師分享，非常的清楚很好理解！！

[@cwpeng-course]

謝謝你的回饋呦 :)))))

[@PhishChiang]

謝謝彭彭的教學，非常清楚

[@cwpeng-course]

謝謝 :)

[@李智翔-e1y]

老師你好 為什麼 btn要加 # 而input不用加 # 呢? 在影片18:16 的教學 希望老師解惑 謝謝

[@cwpeng-course]

選擇器的概念，有加 # 是對應標籤的 id，沒有加 # 是對應標籤名稱。

[@user-iv3yj4ik8p]

我看完也有這個疑惑! 感謝發問~~ 感謝彭彭老師的回答~~

[@hsinyikuo2433]

我喜歡你的教學方式，如果還可加原碼下載一定加快學習，你太優秀了。

[@cwpeng-course]

很高興你喜歡 :) ~ 原碼的部分我再來想想 ~~~

[@joanneja5872]

老師您好，謝謝您的教學，非常清楚而且簡單明瞭！ 但是有個問題想請教： 大約在20:55的時候，為了改變超連結顏色，將"我的最愛"跟"我的作品"的class名稱改成"favorite"跟"demo"，而原先的"content"在這份文件中好像本來就沒有定義 如果本來就有定義"content"的樣式，要改成"favorite"跟"demo"之前，是不是需要另外將"favorite"跟"demo"定義成跟"content"相同的樣式呢？謝謝老師！

[@cwpeng-course]

是的，概念上是需要的哦。 不然 class 也可以用雙重設定，例如 class="content favorite" 就兩個選擇器都會被套用，但後面的優先。

[@黃喬治-n8j]

感謝上傳。受益良多。

[@cwpeng-course]

很高興對你有幫助哦 :)

[@鄒文凱-z8j]

先感謝老師細心的課程 有個問題想要請教: 我將HTML跟CSS分開成兩個檔案寫 其中HTML檔案內 (省略架構) Html練習1 Hello World! CSS檔案內 (黨名CSS1) CSS1 style .h1{ color:black; background-color:chocolate; border: 1px solid black; opacity: 100%; box-shadow: 0px 0px 5px #000000 } .p{ color:crimson; background-color:darkgray; border: 2px dashed black; font-weight: bold; opacity: 80%; } 請問老師為何我總只有的部分有顯示出CSS效果呢? 感謝您

[@cwpeng-course]

CSS 的檔案只要包含 裡面的程式就好。所有的 html 標籤都不能寫進去哦 ~

[@sula678]

想請問老師一下，為什麼非要加outline: none，否則border的顏色並不會改變？而老師的卻可以直接變成紅色？ input:focus{ border: 2px solid #ff0000; outline: none; }

[@cwpeng-course]

如果你是用新版的 Chrome，會有預設的 focus outline 樣式，我錄製的時候應該是沒有的 ~

[@lhc7603]

好棒的課程！

[@cwpeng-course]

謝謝！:)

[@foodywendy6603]

覺得看完影片後我的網站有救了XDDDDDDDDD

[@cwpeng-course]

哈哈哈，希望你順利哪 ~~~~

[@brightkkman]

老師很會教耶，把複雜的東西簡單化，軟工界的赫哲數學? 希望老師能出多一點前端進階方面的ex.Grid

[@cwpeng-course]

謝謝哪，好哦，感謝你的建議，Grid 確實是很好的主題 :)

[@hochingcheung9731]

很有條理和詳細

[@cwpeng-course]

謝謝你 ~~~~~

[@shihloking4251]

謝謝老師 非常好理解！

[@cwpeng-course]

不會，也感謝你的回饋 :)

[@lunghunglin5729]

謝謝老師!非常精準的講解!

[@cwpeng-course]

不會呦，加油！

[@陳俊諺-b6l]

老師您好，看完您的課程之後讓我獲益良多，不過這邊有個小問題想請教老師一下，除了老師這部影片所教的各類選擇器之外，在您的影片“css基礎教學”中，看過您是直接在寫code，範例如下： （我現在要對h3做出變化） 我的自我介紹 ※我發現此寫法雖然可直接省略在的額外寫code，但它只能對我的自我介紹做出變化，而不像標籤名稱選擇器或class 選擇器一樣可以同時給所有或多個使用。 除了上述的差異之外，請問還有哪些地方不一樣呢？ 另外，一般在寫code的時候也會直接在裡面寫變化嗎？ 如果會的話，請問是在哪些場合使用呢？ 抱歉，由於最近才剛開始學習的關係，可能問題會有點多... 期待您的回覆。

[@cwpeng-course]

使用選擇器會讓程式碼看起來比較乾淨俐落，而且可以重複利用相同的樣式，這點對複雜的網頁設計來說很重要。 直接用 style 寫在標籤上很方便，不用太多的設計思考就能運作，適合入門。另外直接寫在標籤上的樣式權重會比較高，如果有相同的屬性，會以 style 上的為主，可以用來覆蓋選擇器中的設定。

[@陳俊諺-b6l]

@@cwpeng-course 非常感謝老師的回覆！我花了一個多禮拜的時間把老師的「Javascript網頁前端工程入門教學」給全部看完了。而且除了看影片之外，我自己也會實際跟著操作一遍，真的非常受用！ 我目前正在動手做一個簡單的網站當個人作品，朝著前端工程師的目標邁進！

[@cwpeng-course]

@@陳俊諺-b6l 謝謝你的回饋，加油哦 :)

[@aprilhuang4798]

謝謝老師，講解的很詳細：）

[@cwpeng-course]

謝謝你的回饋呦 :)

[@吳家華-y3h]

老師，可以再多說一些有關虛擬選擇器的應用嗎?聽了這段css選擇器的詳細使用介紹後，我對class 選擇器和id選擇器都會靈活使用了，但是css好像有很多類型的虛擬選器，我對這方面比較不孰悉，希望老師能有空專門教授更多css虛擬選擇器的應用，感謝!! 另外，我最近在玩css3的border-image功能，但是對於border-image:source slice width outset repeat等等屬性的應用還是不很了解，老師你可以幫我看看我寫的測試程式是哪裡有問題嗎? 圖片可以由標籤顯現出來，但是卻無法以 border-image 這個命令顯示出來，我是照著語法來寫的，但不知道錯在什麼地方?因為無法傳送圖檔給老師，所以只能麻煩老師自行用另一圖檔幫我測測看，麻煩你了!!! css border-image test *{box-sizing:border-box;} #DIV1{ border:20px solid transparent; width:330px; padding:20px; border-image: url(img/border.jpg) 30 30 round; } 原始圖片 將原始圖片套用至 DIV 邊框 以 round 方式填滿

[@cwpeng-course]

程式中 *{box-sizing:border-box;} 後面那行的 是多出來的，刪掉 這行就可以。 也謝謝你對 CSS 選擇器教學的回饋和建議哦 :)

[@吳家華-y3h]

@@cwpeng-course 謝謝老師

[@CRJakaAnfer]

老師 我照著做input改變border的設定2px紅色 不會像你那樣 我要把它改成比較粗比如6px才會看得到紅色 原因是我發現紅色之外還有一圈黑色的外框 2px太細導致看不到紅色 會這樣是什麼原因呢？版本的問題嗎？

[@cwpeng-course]

黑色外框是輸入框取得焦點時預設的效果，你隨便點任何其他位置把焦點從輸入框中移開，就可以看到本來的紅色框線了。我錄製影片時的瀏覽器版本確實沒有這個焦點效果。

[@Shin-ec1ho]

老師我在做input focus的css顏色時，讓他取得焦點時Border有變深，但是顏色一樣是黑色的，但當我把Border調成5px的時候，框線裡面就有紅色了，但是框線最外層還是有黑色深線，請問這是什麼問題? div.content { padding: 10px; border: 1px dashed brown; } input:focus{ border: 2px solid red; } 填寫訊息 送出

[@cwpeng-course]

外面的黑色深線是最新的 Chrome 版本加上去的。可以使用 outline-width:0px 這個設定去除 ~

[@mr_yeti]

請問老師如果想讓所有上層(包含div和ul)底下的.content都套用，除了寫div.contemt和ul.content，可以直接寫一個.content取代上面寫兩個嗎?也就是問可不可以直接寫下層的選擇器呢?

[@cwpeng-course]

可以哦 ~

[@duncantsai7996]

請問選擇器使用上有用 >(大於)這個符號? 譬如: #calendar > div:hover 這個 > 是甚麼意思?

[@cwpeng-course]

同樣是階層式選擇器，但一定要是直接的子元件，例如： 以下這樣，裡面的 div 是 id="calendar" 的兒子的兒子，就不行：

[@duncantsai7996]

謝謝解答.

[@Jason__Chu]

謝謝老師，我也看你的影片在學前端，想加入會員訂閱老師

[@cwpeng-course]

不會呦，加油，歡迎加入哦 :)

[@JU-sq5ek]

想問老師，關於按鈕的HTML， 送出 ，跟你寫的送出 有何差別?

[@cwpeng-course]

設定 type 代表按鈕的種類，設定 id 通常是讓程式碼可以抓到按鈕標籤，以便後續的程式使用。

[@pongp8254]

老師您好，我想請問虛擬選擇器 例如:hover 這個效果 是不是JQ 也能夠做到同樣的事情，我一直認為CSS就是界面的操作 不會涉及到互動，CSS怎麼會有辦法實現互動效果(:hover).....?

[@cwpeng-course]

CSS 可以做到一些基本互動效果，如你提到的 :hover 這個東西。使用 JQ 也可以做到沒錯。

[@JL-kw7qc]

請問一下，學這些一定要把語法全背起來嗎?還是被重點即可?

[@cwpeng-course]

不需要背誦任何東西哦，需要的時候去查詢即可 ~

[@chiwenlai8348]

/標籤名稱選擇器/ h3{ font-size:35px;} 我的選擇器 我的最愛 我最常用的連結 想請教一下老師為甚麼我的標籤名稱設定的無法顯示出來?

[@cwpeng-course]

/標籤名稱選擇器/ 這個註解沒有打對哦。 要打 /* 標籤名稱選擇器 */

[@EDLIN-s9h]

請問要如何看到別人傳給我的填寫訊息

[@cwpeng-course]

會需要學習網站後端和資料庫的開發，要花更多時間哦 ~

[@東東-c2h]

您好: 我在實作focus的部分 紅色的border沒辦法做出來 改成background-color:#ff0000; 可以使背景變成紅色 但改為border:1px solid #ff0000; 就沒辦法做出跟影片一樣的效果 請問是哪邊可能出了狀況 謝謝

[@東東-c2h]

沒事了 我發現有東西會衝突到

[@cwpeng-course]

好哦，有解決就好 ~

[@陳品曄]

請問老師，我觀察到就算我在標籤選擇器設定 標籤以下的所有字體大小為 10px，但我在底下的標籤文字仍然比其他文字還大 所以我想請問，當標籤選擇器、class選擇器、id選擇器、還有標籤預設設定之間發生衝突(例如標籤選擇器設定10px、但本身字體就比較大)，系統會怎麼取捨呢？

[@cwpeng-course]

有個很複雜的優先順序表。簡單的概念是越接近標籤的設定，通常越重要。 另外你可以透過 Chrome 開發人員工具中的 Element 功能，查看每個標籤 CSS 的套用/覆蓋情況，會最直接的告訴我們答案 :)

[@danny58077919]

請問老師適用什麼介面寫程式的？ 目前碰到無法將程式碼分層的困擾 因為我自己看了教學影片後 有用記事本嘗試做做看 但這樣做 程式碼都黏同一層 de_bug的時候很痛苦

[@cwpeng-course]

我這邊影片用的是 Notepad++，但現在很多人喜歡用 VS Code，都可以試試看，看哪個順手。 分層使用鍵盤左邊的 Tab 鍵來完成 ~

[@yhlscallop]

學習到很多 但我想請問一下 type="text/css" 為什麼要這樣打呢? 我去查網路好像比較少解釋說為什麼要這樣打 其它我有疑惑地方 大致網路用心找一下就有解答 唯獨這個比較少解答 另外碰到疑問 就是我也同樣打了整篇 從頭開始跟著keyin 試試 但是我在標籤名稱選擇器那邊body {} 內容可以成功啟用 但是再打個h3{}之後卻無法啟用 一把body {}給屏蔽之後 就能夠讓效果成功呈現 請問我可能是哪邊有錯呢? 謝謝您

[@cwpeng-course]

type="text/css" 只是和瀏覽器說我們要使用 css 來撰寫樣式哦，不過現在也只能用 css，所以其實有寫跟沒寫差不多。 另外一個疑問，要實際看看程式碼嘍。因為一點點的字元打錯，都可能造成問題，所以只是看描述可能無法知道狀況。

[@citrus0610]

老師好強哦顏色的code是怎麼背得這麼熟的?我的功力都只能打顏色單字或一直google

[@cwpeng-course]

不完全用背的哪，有個 RGB 的配色概念嘍 :)

[@q816697q]

老師 你好 我ID選擇器之後做的選擇器都沒有效果 是哪邊錯了嗎 /* id選擇器 */ #btn{ border:1px solid #888888; background-color:#ffffff;padding:5px; } /* 虛擬選擇器 */ #btn:hover{ background-color:#888888; } /* :focus 虛擬選擇器:當目標取得焦點時，套用一組設定*/ input:focus{ border:2px solid #ff0000; } /*階層式選擇器 */ .favorite a{ color:#0000ff; } .demo a{ color:#008800; }

[@cwpeng-course]

你貼出來的 CSS 看起來都還 OK，可能要搭配 HTML 來確認原因哦 ~

[@asd22214520]

老師想請問 大括號打那樣的形式是老師的習慣嗎

[@cwpeng-course]

是哦，是我的習慣 :)

[@littlePervert_yt9527]

為甚麼不用VS code做教學

[@cwpeng-course]

因為這個是很久以前錄的影片，當時 VS Code 還沒有今天這麼火紅，只是這樣 ~

[@interestingtv5591]

老师后期还有教程吗？

[@cwpeng-course]

会持续更新，只是最近比较忙，速度会慢一些 ~

[@玥-j9h]

.favorite應該是class選擇器才對吧 , a才是標籤選擇器?

[@cwpeng-course]

對哦，沒錯 ~

[@ananda4840]

老師請問入這裡上的與台大上的JavaScript (ES6) 網頁前端工程入門有不一樣嗎

[@cwpeng-course]

主要的觀念沒太大差異，實體課程我加入比較多細節、練習題、當下的問答時間。

[@敬恆]

請問老師 這些語法ex:font-size... 有什麼記憶方法嗎 還是常寫就會背下來了！謝謝

[@cwpeng-course]

不需要特別記憶，經常寫就會不小心記下來嘍 ~

[@敬恆]

@@cwpeng-course 謝謝老師

[@pat4749]

請問.demo a{}也可以寫成a.demo嗎？怎麼決定什麼擺前面呢？

[@cwpeng-course]

就如影片說的，.demo a 會看標籤的階層，代表包裹在 class="demo" 標籤中的 a 標籤，中間的空格很重要。 a.demo 如果沒空格，是指 如果有空格 a .demo，就是階層式選擇器。

[@姚字丞]

[@cwpeng-course]

:)

[@黃昱詳]

input:focus{border:2px solid #ff0000;} 這一段我只有出現2PX的粗框沒變求解?QQ

[@cwpeng-course]

瀏覽器在聚焦的時候，本來就會有個預設的外框是 outline 的設定。可能造成一些混淆，你可以試試看再設定大一點的寬度應該會比較明顯 ~

[@黃昱詳]

@@cwpeng-course 以解決 感謝 0.

[@lianchinglee5785]

请问我的focus没反应是为什么

[@cwpeng-course]

得看看你实际上是怎么写的，至少要有你的程式码才有办法进一步确认喽 〜

[@lianchinglee5785]

彭彭的課程 那我需要怎样做呢

[@謝朝欽-d1x]

我一開始也以為沒反應, 但應該是chrome預設的黑色邊框粗線擋住紅色的2px,所以感覺出不來,如果設為10px可以看到還是可以顯示

[@isaactaitaiwan]

請問一下 #888888 是什麼意思

[@cwpeng-course]

顏色的色碼，可以表達各種細節的顏色差異。

[@踢球]

請問想轉前端工作只看老師的影片可以嗎？

[@cwpeng-course]

影片的學習只是個開始，要找工作建議想辦法做一個自己的小專案，會比較容易成功哦 ~

[@踢球]

彭彭的課程 專案？哪一種啊？之前有買門CSS課程，可是一直卡關就學不下去了，老師教的我感覺比較能聽的懂，想再試試看！

[@cwpeng-course]

@@踢球 例如找一個自己喜歡的網站，然後試著把他的版面做出來，就是一個小專案了 ：)

[@踢球]

彭彭的課程 所以先看完影片，然後再去找個網站做做看嗎

[@cwpeng-course]

@@踢球 是哦 ~

[@小黃雞-o8y]

有沒有好用又免費的DW 推薦

[@cwpeng-course]

不太清楚耶，不好意思 XDDDD