selenium中的子元素和后代元素的理解

本文转载自：白月黑羽教python系列，大家可以关注

id 为 container 的div元素 包含了 id 为 layer1 和 layer2 的两个div元素。

这种包含是直接包含， 中间没有其他的层次的元素了。 所以 id 为 layer1 和 layer2 的两个div元素 是 id 为 container 的div元素 的 直接子元素

而 id 为 layer1 的div元素 又包含了 id 为 inner11 和 inner12 的两个div元素。 中间没有其他层次的元素，所以这种包含关系也是 直接子元素 关系

id 为 layer2 的div元素 又包含了 id 为 inner21 这个div元素。 这种包含关系也是 直接子元素 关系

而对于 id 为 container 的div元素来说， id 为 inner11 、inner12 、inner22 的元素 和 两个 span类型的元素 都不是 它的直接子元素， 因为中间隔了 几层。

虽然不是直接子元素， 但是 它们还是在 container 的内部， 可以称之为它 的 后代元素

后代元素也包括了直接子元素， 比如 id 为 layer1 和 layer2 的两个div元素 也可以说 是 id 为 container 的div元素 的 直接子元素，同时也是后代子元素

如果 元素2 是 元素1 的 直接子元素， CSS Selector 选择子元素的语法是这样的

元素1 > 元素2

中间用一个大于号 （我们可以理解为箭头号）

注意，最终选择的元素是 元素2， 并且要求这个 元素2 是 元素1 的直接子元素

也支持更多层级的选择， 比如

元素1 > 元素2 > 元素3 > 元素4

就是选择 元素1 里面的子元素 元素2 里面的子元素 元素3 里面的子元素 元素4 ， 最终选择的元素是 元素4

如果 元素2 是 元素1 的 后代元素， CSS Selector 选择后代元素的语法是这样的

元素1   元素2

中间是一个或者多个空格隔开

最终选择的元素是 元素2 ， 并且要求这个 元素2 是 元素1 的后代元素。

也支持更多层级的选择， 比如

元素1   元素2   元素3  元素4

最终选择的元素是 元素4