---
# System prepended metadata

title: CSS 6.  Descendant Selector / 後代選擇器
tags: [2022 網頁開發全攻略教程 / CSS篇章]

---

# CSS 6.  Descendant Selector / 後代選擇器

- 什麼是後代選擇器? 怎麼做？

  例如以下程式碼:
  
```
<body>
  <h1>1234</h1>
  <div class="link1">
    <a href="#">yahoo!</a>
  </div>
  <div class="link2">
    <a href="#">google Search</a>
  </div>
</body>
```  
- 對於 body 而言，下列舉凡 **h1、div、a**等 tags 都屬於子類別，講白話就是孩子，反之，對於這些標籤而言，**body** 屬父層。

```
.link1 a {
  color: red;
}

.link2 a {
  color: green;
}
```

![](https://i.imgur.com/Vb9oCca.png)

###### tags: `2022 網頁開發全攻略教程 / CSS篇章`