---
# System prepended metadata

title: CSS - Selector
tags: [HTML-CSS]

---

# CSS - Selector
###### tags: `HTML-CSS`

## 一 . 選取器的基本概念
### (一) . 選取器
1. css宣告 ： 常見的css宣告下，其實可以用另外一種方式理解。
```css=
.class-name{
   color:red;
   background-color : black;
}
```
2. 選取器 ： css的宣告其實都滿足下面的特色。
   - 選取器 ： css的class、id、tag等等。
   - 屬性 ： css的properity。
   - 值 ： css的properity的值。
```css=
選取器{
  屬性 ： 值 ;
  屬性 ： 值 ;
}
```

### (二) . 選取器的分類
1. class : 類別選取器。
2. id ： id選取器。
3. tag : html原生tag。
4. 僞元素（虛擬元素）。
5. 僞類別（虛擬類別）。
- Combinators ： 可以指定某些元素後面的元素。

## 二 . CSS的class、id、tag

## 三 . CSS的Combinators
### (一) . Adjacent sibling selector 
1. 功用 ： 選取同層下A元素後面緊接的B元素。
   - 注意結構 ： 是同層喔。
   - A元素後面必須是B元素，選取器才會有用。
2. 語法 ： ```A + B```。
   - 例 ： 可以使的標題後面的第一段文字變的顯目。
   - A、B可以是任何class或id。
```css=
h1+p{
   color :red; 
}
```
3. 應用例一 ： 多排共同元素下排除第一個。
   - 如應用在表單中，可以使第一個```<li>```元素不被選取。
   - 因為第一個元素必不會被同樣元素接著。
```css=
li+li{
   border-top: 1px solid red; 
}
```
### (二) . General sibling selector  
1. 功用 ： 選取同層下A元素後面所有的B元素。
   - 注意結構 ： 是同層喔。
   - A元素後面所有的B元素都會被選取到。
2. 語法 ： ```A ~ B```。
   - A、B可以是任何class或id。
```css=
h1 ~ p{
 color:red;
}
```

### (三) . Child selector
1. 功用 ： 選取A元素為父元素下的子元素B。
   - 注意結構 ： 是異層喔。
   - A元素下一代後的B元素會被選到，只在子代，子代後面的不會。
2. 語法 ： ```A > B```。
   - 例 ： div元素下的p元素。
   - A、B可以是任何class或id。
```css=
div > p{
 color:red;
}
```

### (四) . Descendant  selector
1. 功用 ： 選取A元素為父元素下的子元素B，且包含子代之下。
   - 注意結構 ： 是異層喔。
   - A元素下一代後的B元素會被選到，所有後代的所有B元素都會被選到。
2. 語法 ： ```A  B```(空格隔開)。
   - 例 ： div元素下所有代的p元素。
   - A、B可以是任何class或id。
```css=
div  p{
 color:red;
}
```
## 四 . Pseudo-class
### (一) . 定義
1. 定義 ： 『偽類別』，也是類別的一種，用來表是特定特別得某種『狀態』。
2. 語法 ： 多在其他class、id、tag後面加入『:』。
```css=
div:hover{
  color:red;
}
```
### (二) . 動態偽類
1. **『:link』** ： 尚未點擊的狀態。 
2. **『:hover』**： 滑鼠移動到的狀態。 
   - 常用，每個元素都會支援。 
3. **『:active』**： 點擊當下的狀態。 
   - 常用，每個元素都會支援。 
4. **『:foucs』**： 取得焦點的狀態。
   - 並不是每一個元素都有支援。
   - 表單、超連結tag有支援。(常用於input element)
5.  **『:visited』** ： 點擊過後的狀態。

### (三) . Child偽類
#### 1. :first-child & :last-child 選取器
- 功用 ： ```A:first-child```為A元素為父元素的第一個元素下，```A:last-child```反之。
  - 不是選取『A元素下的第一個元素』。
  - 是『當A元素是其父元素的第一個元素』。 
- 注意 ： 前面的為限制條件，如下例。
  - 他的意思是 ： 在div的子元素中，若.block是他的第一個子元素。
  - 這種用法很依賴html的架構。 
```htmlmixed=
<style> 
div .block:first-child{
 background-color:red;
}
.block{
  background-color:gray;
}
</style>
```
#### 2. :nth-child() & :nth-last-child 選取器
- 功用 ： ```A:nth-child()```為A元素下的第n個元素，```A:nth-last-child```反之。
  - 又跟:first-child相反，不是指『當A元素是其父元素的第n個元素』。
  - 是『A元素下的第n個元素』。
- 數學式表達法 ： 這個選取器的優點就是他可以