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

Question

我有点理解后代选择器,但更复杂的例子给我带来了麻烦.例如:

#content .alternative p

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

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

或者规则应该适用于以下p元素:

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

以下规则怎么样？

#content .alternative .alternative1 p

Answer 1

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

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

有关选择器的更多信息,请查看此链接

Answer 2

选择器的最右侧组件是实际拾取元素的部分.空格是后代选择器.如果没有空格,则选择器全部应用于一个元素.

#content .alternative p

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

#content .alternative .alternative1 p

包含在类alternative1的元素中的p元素包含在id content的元素中包含的class alternative元素中.

#content p.alternative.alternative1

class alternative1的类元素和包含在id内容元素中的类alternative.