CSS组合选择符

组合选择符说明了两个选择器直接的关系。

目录:

  • 后代选取器(以空格分隔)
  • 子元素选择器(以大于号分隔)
  • 相邻兄弟选择器(以加号分隔)
  • 普通兄弟选择器(以破折号分隔)

后代选取器

后代选取器匹配所有值得元素的后代元素。
以下实例选取所有

元素插入到

元素中

实例



    
         
        后代选取器 
        
    
    
        

段落 1。 在 div 中。

段落 2。 在 div 中。

段落 3。不在 div 中。

段落 4。不在 div 中。

CSS组合选择符_第1张图片
效果图

子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
以下实例选择了

元素中所有直接子元素

实例



    
         
        子元素选择器 
        
    
    
        

Welcome to My Homepage

My name is Donald

I live in Duckburg.

I will not be styled.

My best friend is Mickey.

CSS组合选择符_第2张图片
效果图

相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
以下实例选取了所有位于

元素后的第一个

元素

实例



    
         
        相邻兄弟选择器 
        
    
    
        

Welcome to My Homepage

My name is Donald

I live in Duckburg.

My best friend is Mickey.

I will not be styled.

CSS组合选择符_第3张图片
效果图

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有

元素之后的所有相邻兄弟元素

实例



    
         
        后续兄弟选择器 
        
    
      
        

之前段落,不会添加背景颜色。

段落 1。 在 div 中。

段落 2。 在 div 中。

段落 3。不在 div 中。

段落 4。不在 div 中。

CSS组合选择符_第4张图片
效果图

你可能感兴趣的:(CSS组合选择符)