Sass＆：not（：first-of-type）隐藏类中的所有内容

Question

我有一个如下所示的div结构：

<div class="jumbotron jumbotron-fluid bg-inverse text-white">
  <div class="container">
    <div class="row align-items-center">
      <div class="slide col-md-8">
        ...
      </div>
      <div class="slide col-md-8">
        ...
      </div>
    </div>
  </div>
</div>

在我的Sass文件中，我试图隐藏除第一个类型以外的所有内容.slide：

.jumbotron {
  background-color: $white;
  color: $black;
  margin-bottom: 0;
  min-height: 100vh - $navbar-height;
  .slide {
    &:not(:first-of-type) {
      display: none;
    }
  }
}

这似乎是在隐藏所有.slidediv，而不是按预期隐藏“除第一个以外的所有”，不是吗？

Answer 1

:first-of-type只能用于选择元素而不是父元素中的类。

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

如果您想隐藏除第一个之外的所有内容，.slide您可以使用通用同级选择器~

.jumbotron {
    background-color: $white;
    color: $black;
    margin-bottom: 0;
    min-height: 100vh - $navbar-height;
    .slide {
        ~ .slide {
            display: none;
        }
    }
}