星期三, 1月 31, 2007

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

沒有留言: