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

回答