css Задаемстилиэлементамвзависимостиотколичествапотомков

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Задаемстилиэлементамвзависимостиотколичествапотомков相关的知识，希望对你有一定的参考价值。

Код HTML


<ul>
    <li>1</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>


Код CSS


ul {
    padding:10px 1px;
    overflow:hidden;
}

li {
    float:left;
    outline:1px solid gray;
    text-align:center;
    line-height:2;
}

/* один элемент */
li:first-child:nth-last-child(1) {
        width: 100%;
}

/* два элемента */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
        width: 50%;
}

/* три элемента */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
        width: 33.3333%;
}
/* четыре элемента */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
        width: 25%;
}

以上是关于css Задаемстилиэлементамвзависимостиотколичествапотомков的主要内容，如果未能解决你的问题，请参考以下文章