CSS选择器后代选择器

Question

我无法从W3C规范.中了解以下内容

div * p 匹配一个P元素，该元素是DIV元素的孙辈或以后的后代。注意，"*“两边的空白不是通用选择器的一部分；空白是一个组合子，指示DIV必须是某个元素的祖先，该元素必须是P的祖先。

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

请帮忙澄清

Answer 1

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

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

将CSS选择器看作是筛选的几个阶段。CSS选择器实际上是由从右到左读取它们的浏览器解释的。当在选择器中指定多个元素时，首先为最右边的部分找到set所有元素，然后筛选下一个片段设置的元素，以此类推。

在div规则中，我们说的是“在页面上查找所有'div‘元素”。很简单。

在div p规则中，我们首先“查找页面上的所有'p‘元素”。但是，对于这些'p‘元素中的每一个，我们都会问“只给我'p’元素，其中'div‘作为祖先。”

使用相同的逻辑，让我们描述div * p：我们首先“查找页面上的所有'p‘元素”。接下来，我们问“只给我'p‘元素，它有任何类型的父元素”。从这个集合中，我们会问‘只给我这个集合中有'div’作为祖先的元素‘。

选择器div * p与div p几乎相同，但有一个关键区别:为了匹配选择器，<div>至少必须是<p>的祖父母。有关示例，请参见http://jsfiddle.net/cDTGY/。