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不是选择器但是#bslider { > img { display: block; } > .myContainer{ @media only screen { .carousel-inner { perspective: 1000; } } } }根据格式/分辨率等显示样式的条件

编辑：

您可以使用其他选择器包装媒体查询，只是不要忘记将其添加到您的HTML中。

{{1}}

为什么儿童选择器＆gt;在sass中不能使用媒体查询？

1 个答案: