html - 根据实际数字 n 设置 n-children 样式的通用方法

Question

使用 CSS3 完全可以创建如下规则:

.myClass {}

myClass:first-child:nth-last-child(1) {
    width: 100%;
}

myClass:first-child:nth-last-child(5) {
    width: 20%;
}

因此，根据可能 child 的数量，我需要指定附加规则，这有点棒，甚至可能，但仍然非常麻烦。

所以我想知道是否有一些奇特的通用方法可以做到这一点，可能涉及 css counters 和 calc() 或者喜欢吗？

要澄清:我只是好奇是否有可用的css-only 解决方案。我知道我可以在预处理器甚至 (java)script(s) 的帮助下实现同样的事情。

为了进一步澄清:我不想为每个可能数量的 child 定义规则，而是想创建恰好一个(来统治他们;))，这取决于根据 child 的实际数量相应地定义宽度。

所以，假设:4 个 child -> calc(100%/4)，n 个 child -> calc(100%/n)

Answer 1

因此，如果我没理解错的话，您真正想要的是让多个元素在同一行上占据相同的宽度，均匀分布？如果是这样，flexbox 可能就是您真正想要的。将容器设置为 display: flex; 然后让子项(在此上下文中为 flex 元素)具有 flex: 0 1 auto;(即不要超出您的内容，根据需要缩小等)

我设置了一个 CodePen 来展示一个非常基本的例子:http://codepen.io/frippz/pen/bVReYB