CSS实现根据子元素数量应用不同样式

CSS实现根据子元素数量应用不同样式

在前端的页面布局中经常会出现在子元素个数使用不同的样式的需求，比如文章列表，在较少内容下单列表现，而在元素内容较多时使用双列表现。再比如在页面排版上，可以根据元素内容的多少来修改内容的缩放，位置，颜色等样式

:has() 选择器简介

: has()选择器中的括号传递一个选择器参数，如果选择器匹配上了元素就会应用后面的样式，例如：

<div>
	div
</div>

<div>
	<h1>h1</h1>
	div
</div>

div{
	border:1px solid #000;
	margin:1em;
}

div:has(h1){
	background-color:red;
}

显示结果

:has() + : nth-child ()

现在我们知道了 :has() 选择器是用来在匹配成功时使用样式的，而加上 :nth-child() 就会有根据子元素数量去匹配样式的效果 例如：

<div class="container">
	<p>p1</p>
</div>

<div class="container">
	<p>p1</p>
	<p>p2</p>
</div>

<div class="container">
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
</div>

.container{
	border:1px solid #000;
	margin:1em;
}

/* default */
.container {
	background-color:#ddd;
}
/* 包含2个p时 */
.container:has(> p:nth-child(2)){
	background-color:#aaa;
}
/* 包含3个p时 */
.container:has(> p:nth-child(3)){
	background-color:red;
}

显示效果：

其他使用示例

超过一定数量，某子元素应用样式

? <div class="container">
? ? <div>1</div>
? ? <div>2</div>
? ? <div>3</div>
? ? <div>4</div>
? ? <div>5</div>
? </div>
? 
? ?<div class="container">
? ? <div>1</div>
? ? <div>2</div>
? ? <div>3</div>
? ? <div>4</div>
? </div>

? <style>
? ? .container{
? ? ? display: flex;
? ? ? align-items: center;;
? ? ? gap: 1em;
? ? ? padding: 1em;
? ? ? height: 200px;
? ? }

? ? .container > div {
? ? ? height: 80%;
? ? ? background-color: #ddd;
? ? ? display: flex;
? ? ? align-items: center;
? ? ? justify-content: center;
? ? ? flex:auto;
? ? }

? ? .container:has( > div:nth-child(5)) > div:nth-child(3){
? ? ? background-color:aqua;
? ? ? flex:1.2;
? ? ? height: 100%;
? ? }
? </style>

效果： 只有在 5 个及以上子元素的情况下有，某子元素有特定样式（比如轮播图场景）

根据子元素数量文本分栏

<div class="container">
	<p>Occaecat minim eu sint. Quis exercitation anim ipsum Lorem veniam sint. Proident ea irure id sit eu eu in. Cillum incididunt nisi nisi velit non cupidatat sint veniam minim voluptate voluptate exercitation velit tempor aliquip. Nisi exercitation ullamco aute ea laborum incididunt deserunt minim proident dolor tempor proident voluptate ipsum sit. Reprehenderit mollit exercitation amet cillum et irure est laboris esse excepteur voluptate aute. In in mollit qui aliqua culpa aliquip fugiat nulla occaecat magna id veniam quis.</p>
	<p>Occaecat minim eu sint. Quis exercitation anim ipsum Lorem veniam sint. Proident ea irure id sit eu eu in. Cillum incididunt nisi nisi velit non cupidatat sint veniam minim voluptate voluptate exercitation velit tempor aliquip. Nisi exercitation ullamco aute ea laborum incididunt deserunt minim proident dolor tempor proident voluptate ipsum sit. Reprehenderit mollit exercitation amet cillum et irure est laboris esse excepteur voluptate aute. In in mollit qui aliqua culpa aliquip fugiat nulla occaecat magna id veniam quis.</p>
</div>

<div class="container">
	<p>Occaecat minim eu sint. Quis exercitation anim ipsum Lorem veniam sint. Proident ea irure id sit eu eu in. Cillum incididunt nisi nisi velit non cupidatat sint veniam minim voluptate voluptate exercitation velit tempor aliquip. Nisi exercitation ullamco aute ea laborum incididunt deserunt minim proident dolor tempor proident voluptate ipsum sit. Reprehenderit mollit exercitation amet cillum et irure est laboris esse excepteur voluptate aute. In in mollit qui aliqua culpa aliquip fugiat nulla occaecat magna id veniam quis.</p>
	<p>Occaecat minim eu sint. Quis exercitation anim ipsum Lorem veniam sint. Proident ea irure id sit eu eu in. Cillum incididunt nisi nisi velit non cupidatat sint veniam minim voluptate voluptate exercitation velit tempor aliquip. Nisi exercitation ullamco aute ea laborum incididunt deserunt minim proident dolor tempor proident voluptate ipsum sit. Reprehenderit mollit exercitation amet cillum et irure est laboris esse excepteur voluptate aute. In in mollit qui aliqua culpa aliquip fugiat nulla occaecat magna id veniam quis.</p>
	<p>Occaecat minim eu sint. Quis exercitation anim ipsum Lorem veniam sint. Proident ea irure id sit eu eu in. Cillum incididunt nisi nisi velit non cupidatat sint veniam minim voluptate voluptate exercitation velit tempor aliquip. Nisi exercitation ullamco aute ea laborum incididunt deserunt minim proident dolor tempor proident voluptate ipsum sit. Reprehenderit mollit exercitation amet cillum et irure est laboris esse excepteur voluptate aute. In in mollit qui aliqua culpa aliquip fugiat nulla occaecat magna id veniam quis.</p>
</div>

<style>
.container {
	border: 1px solid #000;
	margin: 1em;
	columns: 1;
}

/* 包含3个p时 */
.container:has(> p:nth-child(3)) {
	columns: 2;
}
</style>

显示效果：

结尾

使用 :has() + :nth-child() 可以在前端页面中更好的去做页面布局的自适应，也在内容不足的情况下提供了一种简单实用的容错方法。

而在兼容性上除 Firefox 浏览器，其他的浏览器均有较好的支持。

个人博客： www.iamsee.top

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!