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

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選擇器