---
# System prepended metadata

title: Day 28 阿嬤帶你探索 CSS！（5）

---

# 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 篇（我可真是一個稱職的文章小偷啊哈哈哈）那就請大家敬請期待！








