如何根据子元素个数的不同定义不同的样式？
<pre><code class="language-html"><html>
<head>
<style>
ul {
display: flex;
padding: 0;
}
li {
margin: 1px;
box-sizing: border-box;
background-color: bisque;
list-style: none;
border: 1px solid #000;
padding: 5px;
}
/* one item */
li:first-child:nth-last-child(1) {
width: 100%;
}
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2)~li {
width: 50%;
}
/* three items */
/* 重写所有元素 */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3)~li {
width: 33.3333%;
}
/* 重写倒数第一个元素 */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3)~li:nth-last-child(1) {
background-color:skyblue;
}
/* 重写倒数第二个元素 */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3)~li:nth-last-child(2) {
background-color: goldenrod;
}
/* 重写倒数第三个元素 */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3)~li:nth-last-child(3) {
background-color: yellow;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4)~li {
width: 25%;
}
</style>
</head>
<body>
<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>
</body>
</html></code></pre>