CSS：第一个孩子的课程有效但是：第一个孩子没有

Question

所以我按顺序排列了无序列表，标题和列表项。我为标题分配了不同的类，我只想展示每种类的第一个孩子。基本上这是为包含所有产品的页面添加子类别

以下是代码：

.product-list-list {
  .cat-1 {
    display: hidden;
  }
  .cat-1:first-child {
    display: block;
  }
  .cat-2 {
    display: hidden;
  }
  .cat-2:first-child {
    display: block;
  }
}

<ul class="product-list-list>
  <h5 class="cat-1">sub category 1</h5>
  <li>product details</li>
  <h5 class="cat-1">sub category 1</h5>
  <li>product details</li>
  <h5 class="cat-1">sub category 1</h5>
  <li>product details</li>
  <h5 class="cat-2">sub category 2</h5>
  <li>product details</li>
  <h5 class="cat-2">sub category 2</h5>
  <li>product details</li>
  <h5 class="cat-2">sub category 2</h5>
  <li>product details</li>
</ul>

我得到的结果： 子类别1

子类别2未显示