css/sass :not(:first-of-type) not working, 隐藏所有类型元素

Question

我有一个 sass block ，我尝试了几种不同的方法:

我已经尝试过这个:

.progress-body {
    display: none;
    &:first-of-type {
        display: block;
    }
}

还有这个:

.progress-body {
    &:not(:first-of-type) {
        display: none;
    }
}

还有这个:

.progress-body:not(:first-of-type) {
    display: none;
}

当应用于 HTML 时，如下所示:

<div class="panel">
    <div class="panel-heading">
    </div>
    <div class="panel-body progress-body">
            <div class="row">
                <div class="col-md-12">
                    <p class="lead">Step 1: Choose your template...</p>
                </div>
            </div>
    </div>
    <div class="panel-body progress-body">
            <div class="row">
                <div class="col-md-12">
                    <p class="lead">Step 2: Compose your email...</p>
                </div>
            </div>
    </div>
</div>

结果是它隐藏了带有 progress-body 类的所有元素。这通常是非常简单的 CSS，所以不知道这里出了什么问题......

Answer 1

在这种情况下，progress-body 不是first-of-type，这技术上是.panel-heading 因为 first-of-type 引用的是 type 元素选择器 (div) 而不是类.

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

引用号::first-of-type - CSS | MDN

考虑将 .progress-body 元素包装在包含元素中，您将实现预期的行为，因为 .progress-body 将是的第一个它的类型带有类名.progress-body。

代码片段演示:

.progress-body:not(:first-of-type) {
  display: none;
}

<div class="panel">
  <div class="panel-heading">
  </div>
  <div class="panel-outer-body">
    <div class="panel-body progress-body">
      <div class="row">
        <div class="col-md-12">
          <p class="lead">Step 1: Choose your template...</p>
        </div>
      </div>
    </div>
    <div class="panel-body progress-body">
      <div class="row">
        <div class="col-md-12">
          <p class="lead">Step 2: Compose your email...</p>
        </div>
      </div>
    </div>
  </div>
</div>