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

Question

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

#content .alternative p

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

• 元素#conten t和
的后代
• 也是班级.alternative
的成员

或者规则应用于p元素：

• 元素#content
的后代
• 并且也是班级.alternative的成员？

以下规则怎么样？

#content .alternative .alternative1 p

Answer 1

关于第一个问题：适用于以下 p 元素： 元素#content 的后代以及具有类的元素的后代 .alternative

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

检查this link以获取有关选择器的更多信息

Answer 2

选择器的最右边组件是实际拾取元素的部分。空格是后代选择器。如果没有空格，那么选择器都适用于一个元素。

#content .alternative p

p元素包含在id content的元素中包含的class alternative元素中。

#content .alternative .alternative1 p

p元素包含在类alternative1的元素中，该元素包含在id content的元素中包含的class alternative元素中。

#content p.alternative.alternative1

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

Answer 3

由空格分隔的说明符的每个部分指的是文档中的单独节点。所以它是第一个。

Answer 4

第一个是正确的描述。你的第二种解释将用CSS编写：

#content p.alternative

由于.alternative附加到该版本中的p，因此它是限定符而不是指定后代。如果您改为将其写为

#content p .alternative

这意味着类.alternative的元素是p元素的后代，它们是#content元素的后代。