在我們日常開發的時候，我們的代碼很複雜，因此有可能會出現改一處的CSS，其他地方的樣式也會受影響的情況，這裏簡單的總結一下CSS嵌套選擇，使得避免以上情況。
CSS 選擇器嵌套
4種組合方法
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
descendant selector (space)
留有空格的選擇器
可以看到我們的選擇器是div p,就是div跟p之間有空格，這個的意思是選擇div元素以內的所有的p元素,也就是全部子元素。
child selector (>)
這個 > 選擇器會選擇所有的直接自元素，注意跟上面的所有子元素的區別.
我們可以看到 paragraph 3 in the div 沒有選擇，是因爲該p元素內容是被section包裹着的，也就是不是div的直接自元素，因此背景不會是黃色。
adjacent sibling selector (+)
將會選擇所有該元素同父元素的鄰近的所有元素.注意有sibling,也就是同父元素，adjacent，也就是鄰近的元素.
div的父元素是body，然後在body內div的adjacent,也就是鄰近的元素是paragraph 3,not in the div 內容。
general sibling selector (~)
div~p,就是div元素後面的所有p元素。
在這裏我們可以看到div元素後面的paragraph3,paragraph4都被選擇。
