这篇文章主要介绍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怎么判断某元素的子元素个数并分别设置样式”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！
