有时候会碰见这样一种场景：当一个列表不断延长时，通过隐藏空间或压缩控件等方式来节省屏幕空间，用来提升用户体验。
这时候就需要我们根据兄弟元素的总数来为它们设置相应的样式。
设想一个列表，假设仅当列表的总数为4时才对这些列表项设置样式，这时可以使用li:nth-child(4)来选中列表的第四个列表项。但是我们的需求却是：
在列表的总数为4时选中每个列表项
如果直接利用兄弟选择符li:nth-child(4),li:hth-child(4)~li得到的是第四个列表以及它之后的所有列表项。那么我们转换一下思路分以下几种情况：
当只有一个列表项时，直接利用:only-child即：
li:only-child{
/*只有一个列表时的样式*/
}
如果不给一个元素指定一个具体的高度(height),这个元素就会根据内容适应高度。但是对于width怎么样才能有类似的行为呢？
首先给出一段HTML测试代码：
<p>猫，属于猫科动物，分家猫、野猫，是全世界家庭中较为广泛的宠物。家猫的祖先据推测是起源于古埃及的沙漠猫，波斯的波斯猫，已经被人类驯化了3500年（但未像狗一样完全地被驯化）。</p>
<figure>
<img src="cat.jpg">
<figcaption>猫咪的训练要从幼时抓起，先要摸清猫咪的脾气，然后根据需要选择不同的方式来进行训练。以下几种方式可供选用：强迫、诱导、奖励、惩罚、喊叫。</figcaption>
</figure>
<p>猫，分多种，是鼠的天敌。各地都有畜养。有黄、黑、白、灰等各种颜色；身形像狸，外貌像老虎，毛柔而齿利（有几乎无毛的品种）。以尾长腰短，目光如金银，上腭棱多的最好。身体小巧，样子招人喜爱。好奇心重。</p>
利用CSS可以模拟一种图片对比滑动控件，这个控件会把两张图片叠加起来，允许用户拖动分割条来控制这两张图片的显露区域。这种控件可以理解为两层结构：
下层是一张固定的图片，上层的图片则可以在水平方向上调整大小，从而能够显示下层的图片。
一般这种需求是可以利用JavaScript解决的。但是也可以利用下面这两种CSS方式。
resize方案可以利用CSS3中的resize属性。这个属性就算没听说过，但是也肯定接触过它的行为，因为对于<textarea>元素来说，整个属性被默认设置为both，这就使得<textarea>元素在水平和垂直方向上是可以调整大小的。
对于任何一个overflow属性不是visible的元素来说，resize属性都是适用的。大部分元素resize属性的默认值是none，即禁止调整大小。该属性也接受horizontal和vertical来限制元素调整大小的方向。
昨天实现了阴影弱化背景，这里换个方式实现模糊弱化背景。
下面这种方式主要利用了box-shadow的扩展参数，把元素的投影向各个方向延伸放大。并且利用了viewport单位vmax。
1vmax相当于1vw和1vh两者中的较大值。100vw等于整个viewport的宽度，100vh等于整个viewport的高度
HTML:
<main>
<button>show dialog</button>
<p>
2016 presidential campaign truly is a product of its time. When one presidential candidate loves to communicate with his voters through 140-character bursts on Twitter, and a hasty tweet can cause an international scandal, the other side has to be quick to respond in similar fashion. Hence a new internet gem courtesy of Hillary Clinton’s campaign website: “Donald Trump, Pepe the frog, and white supremacists: an explainer.”
</p>
</main>
<dialog>this is a test this is a test click me click me</dialog>
单选框和复选框的默认样式确实不敢恭维，但是这两种控件在绝大多数浏览器中仍然无法自由的设置样式。这时候可以用下面这种“曲线救国”的思路来实现自定义复选框。
具体思路如下：
由于label元素可以和复选框关联，起到触发开关的作用。我们可以为它添加伪元素，并基于复选框的状态来为其设置样式。然后再把真正的复选框隐藏起来。
CSS的魅力就在于此，正是
label可以和复选框(单选框)关联，才有了自定义复选框的可能性。
有了上面的思路，代码就很简单了。首先是最最最简单的HTML：
<input type="checkbox" id="custom-a" />
<label for="custom-a">自定义复选框</label>