有没有可能只用CSS做到这一点，没有JavaScript？

该场景的大纲是，我有divsome-class类，它将有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做到这一点，没有JavaScript？

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

来源

2014-12-19 Optimizer Oscar

不，你在这里处理动态行为。最好的办法是在CSS中创建单独的规则，并简单地通过JavaScript应用它们。 – beautifulcoder

@beautifulcoder动态行为不需要javascript;响应式设计通常通过CSS来完成。 – admdrew

当然，请使用display: table和adjacent sibling selector。

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>

来源

2014-12-19 18:30:19 Wex

有没有可能只用CSS做到这一点，没有JavaScript？

回答

相关问题