css怎么判断某元素的子元素个数并分别设置样式

这篇文章主要介绍css怎么判断某元素的子元素个数并分别设置样式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都网站设计、成都做网站的开发，更需要了解用户，从用户角度来建设网站，获得较好的用户体验。创新互联多年互联网经验，见的多，沟通容易、能帮助客户提出的运营建议。作为成都一家网络公司，打造的就是网站建设产品直销的概念。选择创新互联，不只是建站，我们把建站作为产品，不断的更新、完善，让每位来访用户感受到浩方产品的价值服务。

工作时遇到这样一个问题:根据某元素所包含的子元素个数，分别设置不同的样式，这个用js可以解决，不过个人认为用css解决可能更简单一点。这也正好加深了我对css选择器的理解和运用。
demo如下：

效果图如下

完整代码如下：

    
    
        *{
            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;
        }
        /*ul只有一个子元素的样式*/
        li:nth-last-child(1):first-child{
            width:100%;
        }

        /*ul有2个子元素的样式*/
        /*li:nth-last-child(2):first-child,  是倒数第二个元素，又是第一个元素，说明li的父元素ul有2个子元素（起到了 判断某父元素下有几个子元素 的作用）*/
        li:nth-last-child(2):first-child,
        /* ~ 选择位于li:nth-last-child(2):first-child 即 第一个子元素之后的元素*/
        li:nth-last-child(2):first-child ~ li{
            width:calc(100% / 2);
        }

        /*ul有3个子元素的样式*/
        /*第一个元素宽度为1/3，字体颜色为蓝色*/
        li:nth-last-child(3):first-child{
            width:calc(100% / 3);
            color:blue;
        }
        /*第一个元素之后的第一个元素（即 有3个子元素的ul 的 第 3 个元素）*/
        li:nth-last-child(3):first-child ~ li:nth-last-child(1){
            width:calc(100% / 4);
            color:red;
        }
        /*第一个元素之后的第一个元素（即 有3个子元素的ul 的 第 2 个元素）*/
        li:nth-last-child(3):first-child ~ li:nth-last-child(2){
            width:calc(100% / 6);
            color:yellow;
        }
    


    
        
11111
    
    
        
11111
        
22222
    
    
        
11111
        
22222
        
33333
    

以上是“css怎么判断某元素的子元素个数并分别设置样式”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！