Sass＆amp;：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;
    }
  }
}

这似乎隐藏了所有.slide div而不是“除了第一个”之外的所有内容，不是吗？

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;
        }
    }
}