Html 了解更复杂的后代选择器示例

我有些理解后代选择器，但更复杂的示例给我带来了麻烦。例如：

#content .alternative p

该规则是否应适用于作为元素E的后代的p元素，其中E为：

• 元素

  #conten

  t和
• 也是类

  的成员。可选
  

或者规则是否应适用于以下元素：

• 元素

  #内容的后代

• 并且也是类的成员。

  。可选

下面的规则怎么样

#content .alternative .alternative1 p

---

关于第一个问题：适用于p元素： 元素#内容的后代，以及具有类的元素的后代。可选

第二个是相同的，只是有一个额外的深度

---

检查选择器的更多信息

选择器最右边的组件是实际拾取元素的部分。空格是子体选择器。如果没有空格，则选择器都应用于一个元素

#content .alternative p

p元素包含在id内容元素中包含的类alternative元素中

#content .alternative .alternative1 p

#content p.alternative.alternative1

p元素包含在alternative类元素中1元素包含在id内容元素中的alternative类元素中

#content .alternative .alternative1 p

#content p.alternative.alternative1

---

p包含在id内容元素中的类alternative1和类alternative元素。

由空格分隔的说明符的每个部分都指文档中的一个单独节点。所以这是第一个。第一个是正确的描述。您的第二种解释将用CSS书写为：

#content .alternative .alternative1 p

#content p.alternative.alternative1

#content p.alternative

由于在该版本中，

.alternative

附加到

p

，因此它是一个限定符，而不是指定子代。如果你把它写成

#content p .alternative

---

它意味着类

的元素。alternative

是

p

元素的后代，是

#content

元素的后代。

同样。alternative必须是#content的后代