---
# System prepended metadata

title: css選擇器
tags: [CSS]

---

# css選擇器
https://www.youtube.com/watch?v=l1mER1bV0N0
## 子選擇器
子 大於 > 只有一曾
子孫 空白   後面全部 

## 兄弟選擇器
ex 
```
li.red ~ li{

}
```
~代表他之後所有的兄弟姊妹

改成 +號的話 只抓他後面的那一個 只有一個
![](https://i.imgur.com/AkFskZe.png)

: 類元素

focus用在 表單輸入和按鈕
![](https://i.imgur.com/UY17D6g.png)

required用在 元素裡面有required
![](https://i.imgur.com/zNgAIsF.png)

ckeck用在ckeckbox
![](https://i.imgur.com/jqwd2WV.png)

disabled用在禁用元素 元素裡面有disabled
![](https://i.imgur.com/iHAh9Gk.png)

## nth last first - child
注意()內可以用n的平方
![](https://i.imgur.com/5aziKHJ.png)

好用的
not用在例外 除了他之外
![](https://i.imgur.com/pp6TsJE.png)

data-的取屬性用法

但也可以不要取值 直接有這屬性就抓
![](https://i.imgur.com/2ADYakg.png)
注意注意   他如果有值 這邊也要有
![](https://i.imgur.com/kz0PuwO.png)

## 委元素 before after
要加上 block
https://hackmd.io/@chrisHsiao/HkG_04lJw

會在元素裡面內容的前後
![](https://i.imgur.com/sQEIirQ.png)


文字提示效果
https://muki.tw/tech/pure-css-tooltip-data-tag/
小知識
「Hello World」文字並沒有按照預期的情況換行，簡單來說是因為預設會使用空白換行，因此我們可以使用pre標籤保留空白字元，寫法為white-space: pre;

小知識 絕對定位 左右 0可以置中
![](https://i.imgur.com/7XnGcHL.png)




###### tags: `CSS`