CSS 选择器后代选择器

Question

我无法理解 W3C 规范中的以下内容。

div * p

matches a P element that is a grandchild or later descendant of a DIV element. Note the white space on either side of the "*" is not part of the universal selector; the white space is a combinator indicating that the DIV must be the ancestor of some element, and that that element must be an ancestor of the P.

空格是如何表示 DIV 必须是某个元素的祖先的组合符？

请帮助澄清

Answer 1

要回答您的问题，您需要先了解浏览器如何解释 CSS 规则。

无论何时编写 CSS 选择器，都可以在选择器中使用一个或多个元素。例如，选择器 div有一个元素，都是div p和 div > p有两个。

将 CSS 选择器视为过滤的多个阶段。 CSS 选择器实际上是由浏览器从右到左读取它们来解释的。当在一个选择器中指定多个元素时，您首先找到最右边的所有元素集合，然后过滤下一个元素集合，依此类推。

在 div 的情况下规则，我们说的是“找到页面上的所有‘div’元素”。很简单。

在 div p 的情况下规则，我们首先“找到页面上的所有'p'元素”。但是随后，对于其中的每个“p”元素，我们会要求“只给我具有‘div’作为祖先的‘p’元素”。

用同样的逻辑，我们来描述div * p :我们首先“找到页面上的所有'p'元素”。接下来，我们要求“只给我具有任何类型父元素的‘p’元素”。从 那个 集合中，我们然后要求“只给我这个集合中具有‘div’作为祖先的元素”。

选择器 div * p将几乎与div p相同，但有一个关键区别:<div>必须至少是 <p> 的祖 parent 供选择器匹配。参见 http://jsfiddle.net/cDTGY/举个例子。