最近想实现一个效果，这里有一个input，他的width为 100%，如果这时候又有两个input，其中一个就会被挤出去。所以我在想css能不能实现根据容器内元素的数量来实现不同的样式，可惜没有找到。不过我找到了另一个，虽然和我当初想的不一样，但是也可以实现我上述的问题。
他就是 `:only-of-type`,在当前范围中，该元素没有相同类型的元素，该伪类生效。
```css
input{
display:inline-block;
width:49%
}
input:only-of-type{
width:100%
}
```
<style>
.demo {
background-color: #d4d4d4;
margin-bottom:10px;
padding: 10px;
}
.demo input{
display:inline-block;
width:49%
}
.demo input:only-of-type{
width:100%
}
</style>
当一个容器内只有一个元素时
<div class="demo" style="max-width:500px">
<input/>
</div>
当有两个元素的时候
<div class="demo" style="max-width:500px">
<input/>
<input/>
</div>
---
当让我们也让存在多个元素时和单个元素时显示不同的其他样式，比如颜色什么的。
<style>
.demo2 {
background-color: #d4d4d4;
margin-bottom:10px;
padding: 10px;
}
.demo2 input{
width:49%;
border-color:red;
}
.demo2 input:nth-child(2){
border-color:purple;
}
.demo2 input:only-of-type{
border-color:blue;
width:100%;
}
</style>
<div class="demo2" style="max-width:500px">
<input/>
</div>
<div class="demo2" style="max-width:500px">
<input/>
<input/>
</div>
他们都是共用一套css就可以了
【学习笔记】 css 伪类 only-of-type
