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

这篇具有很好参考价值的文章主要介绍了CSS实现根据子元素数量应用不同样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

theme: condensed-night-purple
highlight: atelier-cave-light

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

:has() 选择器简介

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

<div>
	div
</div>

<div>
	<h1>h1</h1>
	div
</div>
div{
	border:1px solid #000;
	margin:1em;
}

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

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

: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;
}

显示效果:
CSS实现根据子元素数量应用不同样式

其他使用示例

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

  <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 个及以上子元素的情况下有,某子元素有特定样式(比如轮播图场景)

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

根据子元素数量文本分栏

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

显示效果:
CSS实现根据子元素数量应用不同样式

结尾

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

CSS实现根据子元素数量应用不同样式
而在兼容性上除 Firefox 浏览器,其他的浏览器均有较好的支持。

个人博客: www.iamsee.top文章来源地址https://www.toymoban.com/news/detail-502079.html

到了这里,关于CSS实现根据子元素数量应用不同样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包