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

## 一 . 選取器的基本概念
### (一) . 選取器
1. css宣告 ： 常見的css宣告下，其實可以用另外一種方式理解。

.class-name{
   color:red;
   background-color : black;
}

2. 選取器 ： css的宣告其實都滿足下面的特色。
- 選取器 ： css的class、id、tag等等。
- 屬性 ： css的properity。
- 值 ： css的properity的值。

選取器{
  屬性 ： 值 ;
  屬性 ： 值 ;
}

### (二) . 選取器的分類
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。

h1+p{
   color :red; 
}

3. 應用例一 ： 多排共同元素下排除第一個。
- 如應用在表單中，可以使第一個```<li>```元素不被選取。
- 因為第一個元素必不會被同樣元素接著。

li+li{
   border-top: 1px solid red; 
}

### (二) . General sibling selector
1. 功用 ： 選取同層下A元素後面所有的B元素。
- 注意結構 ： 是同層喔。
- A元素後面所有的B元素都會被選取到。
2. 語法 ： ```A ~ B```。
- A、B可以是任何class或id。

h1 ~ p{
 color:red;
}

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

div > p{
 color:red;
}

### (四) . Descendant selector
1. 功用 ： 選取A元素為父元素下的子元素B，且包含子代之下。
- 注意結構 ： 是異層喔。
- A元素下一代後的B元素會被選到，所有後代的所有B元素都會被選到。
2. 語法 ： ```A B```(空格隔開)。
- 例 ： div元素下所有代的p元素。
- A、B可以是任何class或id。

div  p{
 color:red;
}

## 四 . Pseudo-class
### (一) . 定義
1. 定義 ： 『偽類別』，也是類別的一種，用來表是特定特別得某種『狀態』。
2. 語法 ： 多在其他class、id、tag後面加入『:』。

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的架構。

<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個元素』。
- 數學式表達法 ： 這個選取器的優點就是他可以