css / sass：not（：first-of-type）不工作，隐藏了所有类型的元素

Question

我有一个sass块，我尝试了几种不同的方式：

我试过这个：

.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 元素选择器（div）和不是类。

  

:first-of-type CSS pseudo-class代表了第一个元素   它在一组兄弟元素中的类型。

参考：:first-of-type - CSS | MDN

考虑将.progress-body元素包含在包含元素中，您将实现预期的行为，因为.progress-body 的第一个 strong>班级名称.progress-body。

代码段示范：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你不能将UncaughtTypeError包装在他的回答中，你可以使用（普通）兄弟选择器。

.progress-body + .progress-body {display: none;}

或

.progress-body ~ .progress-body {display: none;}

我希望第一个是默认阻止，如果你没有在其他地方改变它。