CSS選擇器後代選擇器

我不能理解下面從W3C規範。CSS選擇器後代選擇器

DIV * P

匹配是孫子或DIV元件的後面後代一個P元素。請注意，「*」兩邊的空格不是通用選擇器的一部分; 空白是指示DIV必須有一些元件的祖先，並且該元素必須是P.

祖先白色空間如何是表示組合子一個組合子，所述DIV絕成爲某些元素的祖先？

請幫忙澄清

2013-10-22 devv

*旁註：*避免在CSS中使用'*'：http://stackoverflow.com/questions/1714096 /爲什麼這是css-star-選擇器被認爲是有害的/ 1714151＃1714151 – Raptor

在CSS中沒有任何叫'whitespace'的東西，你寫'div * p'和'div * p'選擇一樣的東西。糾正我，如果我錯了。 –

div * p和div * p都不起作用http://jsfiddle.net/qEfz2/ –

要回答你的問題，你需要先了解CSS規則是如何由瀏覽器解釋。

無論何時您編寫CSS選擇器，都可以在選擇器中使用一個或多個元素。例如，選擇器div有一個元素，div p和div > p都有兩個元素。

將CSS選擇器想象成幾個過濾階段。瀏覽器通過從右向左讀取CSS實際上解釋CSS選擇器。如果在選擇器中指定了多個元素，則首先找到最右邊一塊的所有元素，然後過濾下一個元素設置的元素，依此類推。

在div規則的情況下，我們說「在頁面上找到我所有'div'元素」。夠簡單。

對於div p規則，我們首先「找到頁面上的所有'p'元素」。但是，對於這些'p'元素中的每一個，我們然後要求「只給我'具有'div'作爲祖先的'p'元素」。

使用相同的邏輯，我們來描述div * p：我們首先「找到頁面上的所有'p'元素。接下來，我們要求「只給我具有任何類型父元素的'p'元素」。從是集，然後我們問：「給我的只是這些元件，這組中具有的‘格’作爲祖先」。

的選擇div * p將幾乎一樣div p，但是有一個關鍵的區別：<div>必須至少是選擇器匹配的<p>的祖父母，參見http://jsfiddle.net/cDTGY/舉例

2013-10-22 04:09:36 Chris

感謝您的詳細解釋。 div p ==>後代選擇器。那麼爲什麼在它們之間存在通用選擇器和它周圍的空白區域？ – devv

我更新了答案以演示其差異:) – Chris

是的。空格導致p成爲通用運算符的後代* - :) – devv

回答