是否可以使用纯 CSS 来设置仅包含一项的列表与包含多项的列表的样式？

Question

语境

我想对仅包含一项的列表与包含多项的列表进行不同的样式设计。目前我想要有list-style-type:none;一个不同的padding-left列表，其中只有一项。

问题

我确实知道如何编写 javascript 代码，通过操作 DOM 来实现此目标，但我想问是否可以使用纯 CSS？

Answer 1

是的，CSS 有一个内置的选择器，它是only-child.

然后，您可以选择只有一个孩子的父母的子项目，如下面的代码所示。

p:only-child { /*this selects <p> elements of parents that have only one <p> child */
color:red;
}

<div>
  <p>I am an only child</p>
</div>

<div>
  <p>We are many childs</p>
  <p>We are many childs</p>
  <p>We are many childs</p>
</div>