是否可以只用CSS而不是JavaScript来做到这一点

Question

场景

的概述是，我有一个类some-class的div，它将有1个或2个子div s.每当它有1时，我希望那个子div(div.some-class > div(有width: 100%;，但是每当它有2时，我希望它们(div.some-class > div:nth-of-type(1), div.some-class > div:nth-of-type(2)(具有各自的宽度60%和40%。我无法修改 HTML，因为它是由内容管理系统生成的。

有没有 CSS 黑客可以给我这种行为？

Answer 1

当然，请使用display: table和相邻的同级选择器。

body > div {
    display: table;
    width: 600px;
}
div > div {
    background: blue;
    height: 100px;
    display: table-cell;
}
div > div + div {
    background: red;
    width: 40%;
}

<div>
    <div></div>
</div>
<hr>
<div>
    <div></div>
    <div></div>
</div>