[HTML/CSS]响应式列表宽度

/* 既是第一项又是最后一项 */
:first-of-type:last-of-type

/* 既是第一项又是倒数第二项 */
:first-of-type:nth-last-of-type(2)

/* 既是第一项又是倒数第n项 */
:first-of-type:nth-last-of-type(n)

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

ul{
    display: block;
    width: 800px;
    margin: 100px auto;
    list-style: none;
}
li{
    display: inline-block;
}

/* 只有1项 */
li:first-of-type:last-of-type,
li:first-of-type:last-of-type ~ li{
    width: calc( 100% / 1 );
}
/* 只有2项 */
li:first-of-type:nth-last-of-type(2),
li:first-of-type:nth-last-of-type(2) ~ li{
    width: calc( 100% / 2 );
}
/* 只有3项 */
li:first-of-type:nth-last-of-type(3),
li:first-of-type:nth-last-of-type(3) ~ li{
    width: calc( 100% / 3 );
}
/* 只有4项 */
li:first-of-type:nth-last-of-type(4),
li:first-of-type:nth-last-of-type(4) ~ li{
    width: calc( 100% / 4 );
}