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

Question

假设在某种情况下我需要 css 中的子选择器，所以我会将 scss 处理为：

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

    }
}

所以> 子选择器在 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;
            }
         }
      }
   }