# Day 28 阿嬤帶你探索 CSS！（5） 嗨再次見面 相信大家看過前面幾章，應該可以大致上了解 CSS 的由來和概念吧！今天我們要來引用 前面的幾個概念，來完成這次的編程，那就開始吧！GOGO! ## CSS 選擇器 在開始前，我們必須先了解這個東西（阿對對對我就是文章小偷）以致在後面講解時你們 會比較好理解。 顧名思義，就是一個來選取事物的東西，select 這個名詞在 CSS 中扮演的是一種模式，這個模式呢，就是專門來尋找 element 的模式，而 selectors 就是負責去實踐這個模式的重要工具。 `好啦不要拖太長` ## 編程開始 接下來要講些關於 attribute 的事，這邊的 attribute 不包含 global attribute 只要是有關於 attribute 的相關程式碼，都要加兩個中括號（[ ]）有學過數學的應該都知道， 中括號就是處裡括號的四則運算，相信大家都很了解，或許有人會看不懂，那我就直接放程式碼： ``` <!DOCTYPE html> <html> <head></head> <style> input[value] { color: purple; } </style> <body> <input value="蕪湖～" /> <input value="你要我怎麼荔枝？" /> </body> </html> ``` 輸出如下： ![](https://i.imgur.com/XdWopb5.png) 如果你想讓這兩個文字顏色不一樣，怎麼辦？ ![](https://i.imgur.com/9oMfySu.png) 只要在 `value` 輸入你想要的文字，在`<body>`後面記得加上你所選的文字就行了。 假如你有更多的文字，都是一樣的方法，只不過要記得，下一串程式碼，要在大括號外面 輸出如下圖 ![](https://i.imgur.com/5wuz3Ex.png) 這樣就行了。 ## element:hover 這個功能，主要是針對鼠標，他的運作原理是這樣的：網頁開發者，為了讓網頁訪問者知道， 點擊這個 element，有特殊功能，就是一個好心人，負責提醒網頁訪問者，有點像這樣： 把鼠標放上去前： ![](https://i.imgur.com/89bLEfM.png) 鼠標放上去後： ![](https://i.imgur.com/w3anYVO.png) 可以看到有明顯的差異，要怎麼做到這一點呢？ ![](https://i.imgur.com/L8y0YAs.png) 輸出如下： 點之前： ![](https://i.imgur.com/syQERDY.png) 點之後： ![](https://i.imgur.com/y5qIU9N.png) 很神奇對吧！你也趕快去試試吧！ ## 小總結 今天我們時做了好玩的 CSS，還教大家滑鼠的應用（真的很好玩） 下一章就是我們 CSS 的番外篇啦！不出意外的話，明天應該是 CSS 主題的最後一章了， 總算阿，連續了 6 篇（我可真是一個稱職的文章小偷啊哈哈哈）那就請大家敬請期待！