4-7 [Sass]嵌套-伪类嵌套
本节编程练习不计算学习进度,请电脑登录imooc.com操作

[Sass]嵌套-伪类嵌套

其实伪类嵌套属性嵌套非常类似,只不过他需要借助`&`符号一起配合使用。我们就拿经典的“clearfix”为例吧:

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

编译出来的 CSS:

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

避免选择器嵌套:

为了防止此类情况,我们应该尽可能避免选择器嵌套。然而,显然只有少数情况适应这一措施。

任务

在编辑器第2行输入正确的代码,使编译出来的CSS代码如下:

.box:before{
    content:"伪元素嵌套";
}

 

  1. .box{
  2. ? {
  3. content:"伪元素嵌套";
  4. }
  5. }
下一节