css怎么判断某元素的子元素个数并分别设置样式
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍css怎么判断某元素的子元素个数并分别设置样式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
工作时遇到这样一个问题:根据某元素所包含的子元素个数，分别设置不同的样式，这个用js可以解决，不过个人认为用css解决可能更简单一点。这也正好加深了我对css选择器的理解和运用。
demo如下：
效果图如下
完整代码如下：
<!DOCTYPE html><html><head> <title>css3</title> <style type="text/css"> *{ box-sizing:border-box; } ul{ width:100%; margin:0; padding:0; font-size: 0; } li{ margin:0; padding:0; display:inline-block; vertical-align: top; font-size: 13px; border:1px solid red; height:30px; } li:nth-last-child(1):first-child{ width:100%; } li:nth-last-child(2):first-child, li:nth-last-child(2):first-child ~ li{ width:calc(100% / 2); } li:nth-last-child(3):first-child{ width:calc(100% / 3); color:blue; } li:nth-last-child(3):first-child ~ li:nth-last-child(1){ width:calc(100% / 4); color:red; } li:nth-last-child(3):first-child ~ li:nth-last-child(2){ width:calc(100% / 6); color:yellow; } </style></head><body> <ul class="list"> <li>11111</li> </ul> <ul class="list"> <li>11111</li> <li>22222</li> </ul> <ul class="list"> <li>11111</li> <li>22222</li> <li>33333</li> </ul></body></html>以上是“css怎么判断某元素的子元素个数并分别设置样式”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
