# 20230311.0318 CSS選擇器

### 1. Type Selectors
->套用到該html tag

ex: 
<p>type Selectors</p>

p{
 color:red;
}

### 2. Class selectors (用.)
->套用到該class

ex:
<div class="content">class selectors</div>

.content{
 color:red;
}

### 3. ID Selectos (用#)
->套用到該ID

ex:
<div id="content">id selectors</div>

#content{
 color:red;
}

### 4. Universal Selectors (用*)
->將所有元素都套用這個樣式

ex:
*{
 color:red;
}

### 5. Attribute Selectors
->將這個特定元素的屬性都套上樣式

element[attribute]
符合對象: 含該attribute的元素

<img alt="123">會被套用樣式
<img>不會被套用到樣式

img[alt]{
 color:red;
}

element[attributte="value"]
符合對象: 含該attribute且值完全等於value的元素

<a href="https://www.youtube.com/">

a[href="https://www.youtube.com/]{
 color:red;
}

element[attribute*="value"]
符合對象: 含該attribute且值包含value的元素

<a href="https://www.youtube.com/">

a[href*="youtube"]{
 color:red;
}

關鍵字就只抓youtube，在a屬性 有youtube這個值的都會被套用樣式

element[attribute$=”value”]
符合對象: 含該attribute且結尾值包含value的元素

<a href="https://www.google.com.tw">

a[href$="tw"]{
 color:red;
}

element[attribute^=”value”]
符合對象: 含該attribute且開頭值包含value的元素

<a href="https://www.google.com">

a[href^="https"]{
 color:red;
}

element[attribute|=”value”]
符合對象: 含該attribute且(值完全等於value 或 值在-之前等於value)的元素

<div lang="zh-TW"></div>
<div lang="zh-CN"></div>

a[href|="zh"]{
 color:red;
}
關鍵字就抓zh，在a屬性 有zh這個值或-之前有zh值的，都會被套用樣式

element[attribute~=”value”]
符合對象: 含該attribute且(值完全等於value 或 空白的前後等於value)的元素

<img alt="圖片">
<img alt="圖片 沒顯示">

img[alt~="圖片"]{
 color:red;
}

關鍵字就抓圖片，在alt屬性 有圖片這個值或空白之前有圖片這個值的，都會被套用樣式

### 6. Pseudo-class Selectors

#### 超連結
* :link(連結偽類，只作用於<a></a>元素上)
符合對象：未被訪問過的連結
* :visited(連結偽類，只作用於<a></a>元素上)
符合對象：被聚焦的元素
* :focus
符合對象：被聚焦的元素
* :hover
符合對象：滑鼠移到的元素
* :active
符合對象：被點擊的元素(滑鼠點擊到放開前)
* :target
符合對象：目標元素(當超連結的href為標籤時，該相應標籤的元素會變為target狀態)

#### **(E):nth-child(n) 【E的兄弟姐妹】**
符合對象：含E的同一層所有元素中，第n個且為E的元素(該層中若中間穿插其他元素，也會被算進去，只是不會更改該其樣式)

#### **even偶數**
⭕️
:nth-child(even)
❌

#### **odd奇數**
tr:nth-child(odd)


**範例**
* :nth-child(5)->第五個
* :nth-child(n)->所有個
* :nth-child(2n)->n從0開始帶入->0,2,4,6....
* :nth-child(2n+1)->這個值必須大於零，n從0開始帶入->1,3,5,7....
* :nth-child(-n+3)>這個值必須大於零，n從0開始帶入->3,2,1
* p:nth-child(n+8)
:nth-child(-n+15)
->這個值必須大於零，n從0開始帶入
8.15,9.14,10.13,11.12,12.11,13.10,14.9,15.8,16.7,17.6,18.5,19.4,20.3,21.2,22.1
->1~22個P元素

#### :first-child / 同:nth-child(1)
符合對象: 含E的同一層的所有元素中，第1個且為E的元素
⭕️
⭕️
❌

#### :nth-last-child(n)
符合對象: 含E的同一層的所有元素中，從後面數來第n個且為E的元素



#### :last-child
符合對象: 含E的同一層的所有元素中，最後一個且為E的元素 (等同於E:nth-last-child(1))


#### :nth-of-type(n)
符合對象: 含E的同一層E元素中，第n個為E的元素

#### :first-of-type 同 :nth-of-type(1)
符合對象: 含E的同一層E元素中，第一個為E的元素

#### :nth-last-of-type(n)
符合對象: 含E的同一層的E元素中，從後面數來第n個為E的元素

#### :last-of-type
符合對象: 含E的同一層的E元素中，最後一個為E的元素

#### :only-child
⭕️
符合對象: 含E的同一層中，"只有一個"元素
❌

#### :only-of-type
符合對象: 含E的同一層的E元素中，唯一的E元素
⭕️
❌

#### :empty
符合對象: E元素的子層為空 (有包html tag、文字、空格都不算空)


#### :enabled
符合對象: 啟用中的E元素
搭配input等表單類使用


#### :disabled
符合對象: 停用中的E元素
搭配input等表單類使用


#### :checked
符合對象: 被勾選的E元素
搭配<input type=”radio”>、<input type=”checkbox”>、<select><option></option></select> 使用


#### :not(E)
符合對象: 不是E的元素