詞辨：child selector / descendant selector

在CSS中，child selector與descendant selector在翻譯的時候很容易弄混，許多人會把descendant selector翻譯為「子」選擇器，這就和child selector混在一起了。如果從原意來看，child是選擇指定元素的直接子元素，而descendant selector則是包含了指定元素的子元素、子元素的子元素、....，比如說：

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翻譯為「後代元素選擇器」。