---
# System prepended metadata

title: 20230311.0318 CSS選擇器
tags: [前端課程筆記]

---

# 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)
![](https://i.imgur.com/S6wZfyj.png)
❌
![](https://i.imgur.com/WomWo38.png)



#### **odd奇數**
tr:nth-child(odd)
![](https://i.imgur.com/tPZqm1a.png)

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

**範例**
* :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的元素
⭕️
![](https://i.imgur.com/rVZ2NbT.png)
⭕️
![](https://i.imgur.com/7DfI4Bh.png)
❌
![](https://i.imgur.com/ulILayp.png)



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

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

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


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

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


#### :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的同一層中，"只有一個"元素
![](https://i.imgur.com/n8OzunW.png)
❌
![](https://i.imgur.com/mNYvYND.png)

#### :only-of-type
符合對象: 含E的同一層的E元素中，唯一的E元素
⭕️
![](https://i.imgur.com/Caw1yuE.png)
❌
![](https://i.imgur.com/toUSSkS.png)

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

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


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

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


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

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


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

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

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

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

