html - 仅具有 CSS 的 UL 中的组标题？

Question

我想将组 header 添加到 UL。

我创建了类似以下结构的东西(实际上这是从数据库动态构建的):

<ul>
  <li class='group group-1'>
    <div>Group 1</div>
    ABC
  </li>
  <li class='group group-1'>
    <div>Group 1</div>
    DEF
  </li>
  <li class='group group-2'>
    <div>Group 2</div>
    GHI
  </li>
  <li class='group group-2'>
    <div>Group 2</div>
    JKL
  </li>
  <li class='group group-3'>
    <div>Group 3</div>
    MNO
  </li>
<ul>

我想只显示每个组的第一个 组标题DIV。应隐藏重复的组标题。

请注意，组名称(1、2、3 等)各不相同，因为它们基于数据库中的 ID。

我想用纯 CSS 来做，这可能吗？

Answer 1

你必须去每个选择器:

[class*="group-1"] + [class*="group-1"] div,
[class*="group-2"] + [class*="group-2"] div ,
[class*="group-3"] + [class*="group-3"] div 
/* and so on */{
  display:none;
}

[class*="group-1"] + [class*="group-1"] div,
[class*="group-2"] + [class*="group-2"] div,
[class*="group-3"] + [class*="group-3"] div{
  display:none;
}

<ul>
  <li class='group group-1'>
    <div>Group 1</div>
    ABC
  </li>
  <li class='group group-1'>
    <div>Group 1</div>
    DEF
  </li>
  <li class='group group-2'>
    <div>Group 2</div>
    GHI
  </li>
  <li class='group group-2'>
    <div>Group 2</div>
    JKL
  </li>
  <li class='group group-3'>
    <div>Group 3</div>
    MNO
  </li>
<ul>