html - 仅显示每个类别的第一个元素

Question

在我的代码中，有列表项，它们都有一个类别。为每个列表项依次添加每个类别。

这是我的 HTML:

HTML

<ul>

  <li class='A'>A1</li>
  <li class='A'>A2</li>
  <li class='A'>A3</li>
  <li class='A'>A4</li>

  <li class='B'>B1</li>
  <li class='B'>B2</li>
  <li class='B'>B3</li>
  <li class='B'>B4</li>

  <li class='C'>C1</li>
  <li class='C'>C2</li>
  <li class='C'>C3</li>
  <li class='C'>C4</li>

</ul>

CSS

ul li{display:none}
ul li.A:nth-of-type(1){display:block}
ul li.B:nth-of-type(1){display:block}
ul li.C:nth-of-type(1){display:block}

我试图仅显示每个类别的第一个元素。我期待以下输出:

• A1
• B1
• C1

这是我的 fiddle - https://jsfiddle.net/9pdby6st/200/

我观察到 nth-of-type 仅当第一个元素是该类别时才起作用。

以下是限制:

• 无法更改 html 结构
• 无法使用 JavaScript

可以使用SCSS。有什么建议吗？

Answer 1

您可以对以类名结尾的元素使用相邻的同级选择器 + ，并以另一个类名开始下一个标记。

例如:.A + .B {显示: block }

在上述情况下，只有一个实例是可能的，并且第一个具有类名 B 的元素将显示，而其他同级元素将被隐藏。

您可以使用它来创建许多组合，例如 .B + .C {display: block} 等。

JSFiddle link

ul li {
  display: none
}

ul li.A:first-child {
  display: block
}

ul li.A+.B {
  display: block
}

ul li.B+.C {
  display: block
}

<ul>

  <li class='A'>A1</li>
  <li class='A'>A2</li>
  <li class='A'>A3</li>
  <li class='A'>A4</li>

  <li class='B'>B1</li>
  <li class='B'>B2</li>
  <li class='B'>B3</li>
  <li class='B'>B4</li>

  <li class='C'>C1</li>
  <li class='C'>C2</li>
  <li class='C'>C3</li>
  <li class='C'>C4</li>

</ul>