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

时间:2018-06-13 23:16:57

标签: css css-selectors

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

以下是代码:

.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未显示

0 个答案:

没有答案