Sass 如何选择BEM Scss元素内的第n个子元素

我正在使用BEM SCS请解释如何在第n个子元素内选择

我尝试了以下格式，但对我无效

<div class="bookearly-container" >
    <div class="row bookearly-container__row">
        <div class="col-xs-12 col-md-4 bookearly-container__col">
            <div class="bookearly-container__discountcontainer">
            </div>
            <div class="bookearly-container__discountcontainer">
            </div>
            <div class="bookearly-container__discountcontainer">
            </div>
        </div>
    </div>
</div>

---

你能解释一下如何选择吗？提前感谢。

您正在

.bookearly-container\uuu行

（CSS示例中的第4行）中使用子组合符（

），并且唯一的直接子组合符是

.bookearly-container\uu列

如果要针对

.bookearly-container\uuu discountcontainer

元素，需要稍微调整选择器嵌套

尝试将

@debug

指令与

&

选择器结合使用，以查看实际选择的内容，如果没有其他线索，这将非常有用

这是一个解决问题的直截了当的建议：

.bookearly-container {
  @debug &; // .bookearly-container

  &__row {
    @debug &; // .bookearly-container__row
  }

  &__discountcontainer:nth-child(3) {
    @debug &; // .bookearly-container__discountcontainer:nth-child(3)

    &:before {
      @debug &; // .bookearly-container__discountcontainer:nth-child(3):before
    }
  }
}

如果出于某种原因依赖子组合符（

），可以将其嵌套在

&\u col

选择器中，如下所示：

.bookearly-container {

  &__col {

    // Targeting any class ending with "__discountcontainer"
    & > [class$="__discountcontainer"]:nth-child(3) {

      &:before {
        @debug &; // .bookearly-container__col > [class$="__discountcontainer"]:nth-child(3):before
      }
    }
  }
}

---

你能把相关的html添加到你的问题中吗？你看过你生成的css了吗？编译的选择器如下所示：

.bookearly-container\uuuuuuuuRow>：第n个子（3）\uuuuuuuu折扣容器：在{}

之前，因此

&\uuuuuuuu折扣容器

应该是

的元素。bookearly容器

的可能重复项

.bookearly-container {

  &__col {

    // Targeting any class ending with "__discountcontainer"
    & > [class$="__discountcontainer"]:nth-child(3) {

      &:before {
        @debug &; // .bookearly-container__col > [class$="__discountcontainer"]:nth-child(3):before
      }
    }
  }
}