sass - 如何在Element BEM Scss中选择第n个 child

Question

我正在使用 BEM Scss 请解释如何在第 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>

我的 BEM Scss 我添加了无效的 nth-child 3rd element children 元素:

.bookearly-container {
    &__row {
        margin-bottom: 4.6rem;
        & > :nth-child(3) {
            &__discountcontainer {  -- this element not selected
                &:before {
                    display: none;
                }
            }
        }
    }
}

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

Answer 1

您正在 > 中使用子组合器 ( .bookearly-container__row ) (CSS 示例中的第 4 行)，唯一的直接子级是 .bookearly-container__col .

如果您想针对 .bookearly-container__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
    }
  }
}

如果您出于某种原因依赖子组合器( > )，您可以将它嵌套在 &__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
      }
    }
  }
}