CSS 添加显示块除某些项目外的所有项目

Question

我有这个 div 用于显示一些图像，我可以将 display: none 添加到除第一个、第二个和第三个之外的所有项目吗？

  <ng-template #customDayTemplateHover let-day="day" class="cal-time-events">
<div class="user-day-off-template" *ngFor="let dayOff of dayOffsArrayDayView">
  <div class="users">
    <img class="user-img" src="{{dayOff.photo}}" alt="">
    <div class="name-type">
      <span class="type">{{dayOff.type}}</span>
      <span class="name">{{dayOff.employee_name}}</span>
    </div>
  </div>
</div>

Answer 1

您可以使用 nth-child 选择器 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 2

您可以使用 functional notation with the nth-of-type 选择器来完成此操作。

例如：

ul li:nth-of-type(1n+4) { display: none; }

Answer 3

您可以添加属性 class 来定义属性 css: https://www.w3schools.com/html/html_classes.asp

您可以进行验证以了解这是哪个元素class

CSS 添加显示块除某些项目外的所有项目

CSS add display block all items except some items

html

css