使用 SASS 显示 3 个元素的最后一个类型答案

【问题标题】：display the last-of-type of 3 elements with SASS使用 SASS 显示 3 个元素的最后一个类型
【发布时间】：2016-10-08 10:56:07
【问题描述】：

我的 SASS 和通知有问题。我有 3 种类型的警报通知（危险、警告、成功），我希望显示这 3 种警报的最后一种类型（见下图右点）。提前感谢您的回复。

我的 SASS

#app-notification {

    top: inherit;
    bottom: 20px !important;

    .alert {
        padding: 10px;
        margin-bottom: 20px;
        border: 0;
        border-radius: 0;
        box-shadow: 0 0 4px rgba(0,0,0,.5);
        background: #fff;
        color: #263f5e;

        &:last-of-type { margin-bottom: 0; }

    }

    .alert-danger {
        border-bottom: 3px solid #ff3b30;
        strong { color: #ff3b30; }

    }

    .alert-warning {
        border-bottom: 3px solid #ffcc00;
        strong { color: #ffcc00; }
    }

    .alert-info {
        border-bottom: 3px solid #007aff;
        strong { color: #007aff; }
    }

    .alert-success {
        border-bottom: 3px solid #4cd964;
        strong { color: #4cd964; }
    }

}
// Test
#app-notification .alert-danger:not(:last-of-type) { opacity: .2; }
#app-notification .alert-success:not(:last-of-type) { opacity: .2; }
#app-notification .alert-warning(:last-of-type) { opacity: .2; }

【问题讨论】：

所有元素是否都属于同一类型（即它们都是div 或span）？如果是，那么 last-of-type 伪将不适合您，因为正如命名所暗示的那样，它仅选择父项下其类型的最后一个元素。您附加到伪的class 选择器只是一个附加条件。也就是说，如果它也有给定的类，它将选择一个类型的最后一个元素，而不选择具有给定类的最后一个元素。
所有元素都是div，有一个普通类alert，其他类alert-TYPE。实际上，只有last-of-type有效，而不是每种类型的last-of-type。
因为type 不是class。您正在寻找不存在的 last-of-class 选择器。使用 JS 解决这个问题。
我认为您误解了last-of-type 选择器。这里的类型是指元素类型，仅此而已。所以在你的alert 元素中，都是div 类型，所以只有一个last-of-type。

标签： css sass css-selectors

【解决方案1】：

As there is not :last-of-class selector in CSS，你需要使用 JS。这是一个简单的 JQuery 解决方案，使用 :last 选择器：

$('.alert-danger:last, .alert-info:last, .alert-warning:last').addClass('last');

$('.alert-danger:last, .alert-info:last, .alert-warning:last').addClass('last');

.alert {
  padding: 10px;
  margin-bottom: 20px;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  background: #fff;
  color: #263f5e;

  &:last-of-type { margin-bottom: 0; }

}

.alert-danger {
  border-bottom: 3px solid #ff3b30;
  strong { color: #ff3b30; }

}

.alert-warning {
  border-bottom: 3px solid #ffcc00;
  strong { color: #ffcc00; }
}

.alert-info {
  border-bottom: 3px solid #007aff;
  strong { color: #007aff; }
}

.last{
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="#app-notification">
  <div class="alert alert-danger">alert-danger</div>
  <div class="alert alert-danger">alert-danger</div>
  <div class="alert alert-info">alert-info</div>
  <div class="alert alert-danger">alert-danger</div>
  <div class="alert alert-info">alert-info</div>
  <div class="alert alert-warning">alert-warning</div>
  <div class="alert alert-warning">alert-warning</div>
  <div class="alert alert-danger">alert-danger</div>
</div>

JSFiddle

【讨论】：

【解决方案2】：

很遗憾，纯 CSS 无法实现。您可能想使用已经显示的 JS，或者（如果您想继续使用纯 CSS），您可能可以反转列表中的项目并隐藏除第一个类之外的所有内容，如下所示：

.alert-danger ~ .alert-danger,
.alert-info ~ .alert-info,
.alert-warning ~ .alert-warning {
  display: none;
}

【讨论】：