当类不同时，使用 & 切换 :after 父元素上的图标

Question

我正在尝试以父框元素为目标来更改 :after Pseudo 元素中的图标。当我将 & 符号放在类之后，它会跳出： .box-example-default #pageContainer .box .box-header 这不是你应该如何使用它吗？任何建议

<div id="pageContainer">
    <div class="box box-example box-example-default">
        <div class="header">
            <h1>Title<h1>
        </div>
    </div>

    <div class="box box-example box-example-simple">
        <div class="header">
           <h1><h1>
        </div>
    </div>
 </div>
.box {
    .header{
        &:after{
         position: absolute;
         right:0;
         bottom:-63%;
          content: '\f0ce';
         display:block;
         font-family: "FontAwesome";

         .box-example-simple &{
              content: '\f0ce';
           }
        }
    }

Answer 1

末尾的 & 符号对您不起作用，因为您需要同一级别的 .box 和 .box-example-simple。看到这个post

您可以使用@at-root 和#{&} 来实现这一点，如下所示：

.box {
    .header{
        &:after{
         position: absolute;
         right:0;
         bottom:-63%;
         content: '\f0ce';
         display:block;
         font-family: "FontAwesome";

        @at-root .box-example-simple#{&} {
              content: '\f0ce';
           }
        }
    }
}

但是，把它写出来可能会更简洁：

.box {
  .header {
    &:after {
      position: absolute;
      right:0;
      bottom:-63%;
      content: '\f0ce';
      display:block;
      font-family: "FontAwesome";
    }
  }

  &.box-example-simple {
    .header {
      &:after {
        content: '\f0ce';
      }
    }
  }
}