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

这是我的小提琴-https://jsfiddle.net/9pdby6st/200/

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

有以下限制：

无法更改html结构
不能使用javascript

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

Answer 1

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

例如：.A + .B {display: 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>

Answer 2

如此处所示：https://stackoverflow.com/a/8539107/1423096

您可以为所有项目设置属性，然后为第一个之后的兄弟姐妹撤消该属性。

ul li {
  color: red
}

ul li.A:nth-of-type(1) {
  color: blue
}

ul>li.B {
  color: green
}

ul>li.B~li.B {
  color: red
}

ul>li.C {
  color: yellow
}

ul>li.C~li.C {
  color: red
}

<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>

Answer 3

尝试一下（受alo Malbarez answer启发）

ul li{display:block}
ul>li.A~li.A {display: none}
ul>li.B~li.B {display: none}
ul>li.C~li.C {display: none}

<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>

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

3 个答案: