css - Sass & :not(:first-of-type) hides everything with the class

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 divs 而不是“除第一个之外的所有”，不是吗？

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