Css 基于子元素的子元素数量的样式元素

发布于04月12日

我知道我可以根据元素与:has()个伪类的子级数量来在CSS中设置元素的样式:

.wrapper:has(> :last-child:nth-child(3)) { 
  background-color: red;
}

然而，在我的例子中，HTML看起来是这样的:

<div class='list'>
  <div class='wrapper'>
    <span>Element1</span>
    <span>Element2</span>
    <span>Element3</span>
  </div>
</div>

我想根据有多少元素来设计list类的样式.

推荐答案

此代码片段根据.wrapper有多少children来为.list的背景上色.它补充说，它希望.wrapper成为.list的第一个子元素，因为这就是它在给定代码中的情况.

.list:has(.wrapper:first-child > :last-child:nth-child(3)) {
  background-color: red;
}

<div class='list'>
  <div class='wrapper'>
    <span>Element1</span>
    <span>Element2</span>
    <span>Element3</span>
  </div>
</div>

注意:如果列表内的任何旧包装是必需的，则删除:第一个子元素

实用课程推荐