【css】结构选择器

结构选择器，也称之为组合器选择器，根据它们之间的特定关系来选取元素。

CSS 中有四种不同的组合器：

• 后代选择器 (空格)

• 子选择器 (>)

• 相邻兄弟选择器 (+)

• 通用兄弟选择器 (~)

选择器	示例	描述
element element	div p	选择 div 元素内部的所有 p 元素
element>element	div>p	选择父元素为 div 元素的所有 p 元素
element+element	div+p	选择紧接在 div 元素之后的 p 元素
element~element2	p~ul	选择 p 元素同级并在 p 元素后面的所有 ul 元素

后代选择器

HTML 中元素是以父子级、兄弟关系存在的。后代选择器指元素后的元素（不只是子元素，是后代元素）。

例1：

    
...
    
        

            

                
main-article-h2
                

                    
main-article-aside-h2
                
            
            
main-h2
            
main-h1
        
    

子元素选择器

子元素选择器中选择子元素，不包括孙级及以下元素。

例2：

    
...
    
        

            

                
main-article-h2
                

                    
main-article-aside-h2
                
            
            
main-h2
            
main-h1
        
    

紧邻元素兄弟

用于选择紧挨着的同级兄弟元素。

例3：

    
...
    
        

            
main-h2-1
            
main-h2-2
            

                
main-article-h2
                

                    
main-article-aside-h2
                
            
            
main-h2-3
            
main-h2-4
            
main-h1
        
    

后面兄弟元素

用于选择后面的所有兄弟元素。

例4：

    
...
    
        

            
main-h2-1
            
main-h2-2
            

                
main-article-h2
                

                    
main-article-aside-h2
                
            
            
main-h2-3
            
main-h2-4
            
main-h1