CSS 选择子元素和后代元素

 

<div id='container'>
    
    <div id='layer1'>
        <div id='inner11'>
            <span>内层11</span>
        </div>
        <div id='inner12'>
            <span>内层12</span>
        </div>
    </div>

    <div id='layer2'>
        <div id='inner21'>
            <span>内层21</span>
        </div>
    </div>
    
</div>

 

子元素概念:

如上代码 , 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 、inner21 的元素 和 两个 span类型的元素都不是它的直接子元素， 因为中间隔了几层。

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

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

书归正传:

1.CSS选择后代元素
如果 元素2 是 元素1 的后代元素，那么,使用CSS Selector 选择元素2 的表达式为:

元素1 元素2

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

同理, 元素4 是 元素1 里面的后代元素 元素2 里面的后代元素 元素3 里面的后代元素 , 那么,使用CSS Selector 选择元素4 的表达式为:

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

2.CSS选择子元素
如果 元素2 是 元素1 的直接子元素，那么,使用CSS Selector 选择元素2 的表达式为:

元素1>元素2

注释 : 中间用一个大于号 

也可以这样写:   元素1  元素2  ,因为 子元素也属于后代元素

同理, 元素4 是 元素1 里面的子元素 元素2 里面的子元素 元素3 里面的子元素 , 那么,使用CSS Selector 选择元素4 的表达式为:

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