css selector

好用的CSS選擇器 xy, x>y, x+y, x~y

周念穎 Neja Chou 2021/05/04 10:10:38
59

CSS選擇器, xy, x>y, x+y, x~y

在寫CSS的時候,要套用某樣式,使用CSS選擇器是很棒的方式,可以有效地降低我們對於class命名的依賴。

 

一起來認識幾個好用的CSS選擇器吧!!

 

1. xy 

x標籤內,包的所有y標籤子元素

div p,指的是div內,所有的p

 

 

2. x>y

x標籤內,直接子層的y

div > span,指的是div內,直接子層的span,所以可以看到000依然沒有變色。

 

 

來看個對比吧!!

div span,指的會是,div內的所有span,所以000也會吃到紅色。

 

 

3. x+y 

x標籤後面,接的第一個y標籤

div + p,指的是div後面,接的第一個p

 

4. x~y

x標籤後面,接的所有y標籤

div ~ span,指的是,div以後,接的所有span

 

參考資料來源 30個你必須記住的CSS選擇器

周念穎 Neja Chou