时间戳

首页 > 解决方案 > 是否可以使用纯 CSS 为仅包含一项的列表与包含多项的列表设置样式？

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

问题描述

语境

我想为仅包含一项的列表与包含多项的列表设置不同的样式。目前，对于只有一项的列表，我想拥有list-style-type:none;不同的列表。padding-left

问题

我确实知道如何编写 javascript 代码来通过操作 DOM 来实现这一目标，但我想问是否有可能以某种方式使用纯 CSS？

标签： htmlcss

解决方案

是的，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>

推荐阅读