div > p {...}就是child selector,會將後面的CSS樣式套用在直接包含在div內的p元素上,div與p之間不能夾有其他層的元素。也就是說,只會套用在像是<div><p>...</p></div>這樣的p上。但如果寫成這樣:
div p {...}就變成是descendant selector,會將後面的CSS樣式套用在所有包含在div內的p元素上,不論p元素與div之間有沒有夾著其他層的元素。也就是說,即便是<div><span><p>...</p></span></div>這樣中間夾了一層span,樣式也會套用到最裡頭的P上。
因此,在翻譯時我比較建議要將這中間的差別區分出來,最簡單的方法就是將child selector翻譯為「子代元素選擇器」,而將descendant selector翻譯為「後代元素選擇器」。