UL中只有CSS的组头？

Question

我想将组头添加到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>

​

Answer 2

CSS ~选择器针对所有以下兄弟姐妹。因此，.group-1 ~ .group1 { display: none; }将隐藏除第一个以外的所有.group-1元素。

动态组名通常也没有问题，因为您可以使用[attribute]选择器将它们作为目标。例如，[class*="group-"]将针对所有元素，这些元素有一个包含"group-“的类。

但是，不可能将这两个选择器组合在一起，只使用CSS来记忆/捕获通配符值。

CSS专用的“解决方案”将在此之前生成所有可能的类名(例如，使用SASS)并使用所述的~选择器。下面是一个有用的例子：

http://codepen.io/MattDiMu/pen/WxvGqe

然而，在大多数情况下，这是一个糟糕的想法，因为您需要将所有可能的ID作为类生成。

Answer 3

考虑到您的结构，您需要能够用CSS来表示

• “具有特定、未知类名的元素的第一次出现”，或
• “具有特定、未知类名的元素，该元素跟随具有相同类名的另一个元素”，以隐藏后续的标题，

这两种方法都是不可能的，即使使用选择器4的:nth-child(An+B of S)表示法也是不可能的，因为您事先不知道类名。

如果您可以控制您的标记，我建议将您的组分割成单独的UL元素，并且每个组都有一个标头。这是最有语义的方法。

如果您无法控制您的标记，最好的方法是使用JavaScript将另一个类名附加到每个组的第一个LI，然后隐藏.group:not(.first) > DIV (其中" first“是附加的类名)。