Question

我正在尝试将父框元素作为目标，以便在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';
      }
    }
  }
}

在使用＆amp;的父元素之后切换图标：当班级不同时

1 个答案: