为什么儿童选择器>不适用于sass中的媒体查询？

Question

假设在一个情况下，我需要的孩子选择在CSS中，所以我会用SCSS做得一样：

#bslider { 
    > img { 
      display: block; 
     } 
    > #slide { 
     .carousel-inner { 
      perspective: 1000; 
     } 

    } 
} 

所以>孩子selecter工程SCSS不错。但现在考虑，如果我需要媒体查询过，所以我会做它：

#bslider { 
    > img { 
      display: block; 
     } 
    > @media only screen { 
     .carousel-inner { 
      perspective: 1000; 
     } 

    } 
} 

但它给因媒体查询错误。为什么我在@media规则之前不能使用>？

建议我在使用id，class或tag之前使用>作为选择器。但是，我不得不将它添加到所有的选择是他们的任何方式来达致这：

#bslider { 

    > img { 
     display: block; 
    } 
     @media only screen > { 
     .carousel-inner { 
      perspective: 1000; 
     } 
     .img { 
      display: inline; 
     } 

     .img2 { 
      display: inline-block; 
     } 


    } 
} 

Answer 1

#bslider { 
    > img { 
     display: block; 
    } 
    @media only screen { 
     > .carousel-inner { 
      perspective: 1000; 
     } 
    } 
} 

为什么你不能使用>media之前是>是选择的一部分原因，而media不是一个选择，但对于其样式取决于格式/分辨率显示的条件等

编辑：

你可以有其他选择包住媒体查询，只是不要忘了将它添加在你的HTML。

#bslider { 
    > img { 
     display: block; 
    } 
    > .myContainer{ 
     @media only screen { 
      .carousel-inner { 
       perspective: 1000; 
      } 
     } 
     } 
    }