能用css解决的就不要用JavaScript。16个常用css技巧收集整理（一），16个常用css技巧收集整理（二），16个常用css技巧收集整理（三）都有介绍，本文继续其它收集的css技巧。
表单相关的CSS收集
CSS3的出现，让表单样式丰富起来了。以前一些需要通过JavaScript来辅助完成的交互样式，现在通过CSS就可以实现。这里只是做一下记录，不做代码演示。单冒号为CSS伪类，双冒号为CSS伪元素。
:read-write
代表一个元素可以被用户编辑，例如可输入文本的 input元素。
:read-only
表示此元素不可以被用户编辑的，例如给input元素添加readonly属性。
:focus-within
如果该元素或该元素的后代元素获得焦点，则选中元素。例如：当用户在表单中某个input上获得焦点，会高亮整个表单。
<!--此form表单将被选中-->
<form>
<!--当input文本框获得焦点时-->
<input type="text">
</form>form:focus-within{
background-color:#f60;
}::placeholder
在form表单中input或textarea元素上可以应用placeholder属性即"占位符"。通过设置伪元素::placeholder允许我们自定义占位文本大小、颜色、背景等样式。
:placeholder-shown
在input或textarea元素placeholder text（占位文本）可见时生效。例如通过:not(:placeholder-shown)来实现当用户输入时动态的隐藏和显示input对应的label或提示。
caret-color
caret-color属性用来定义插入光标（caret）的颜色，就是那个在网页的可编辑器区域内，用来指示用户的输入插入光标。可编辑器区域包括input、textarea、设置contenteditable的普通HTML标签。
:required
在input或textarea元素拥有required(必填)属性时生效渲染其外观。
:optional
与:required相反。表示任意没有required(必填)属性的input、select、textarea元素时使用。
:invalid
表示任意内容未通过验证的input或其他form元素。
:valid
与:invalid相反，指通过验证时的样式。
:disabled
表示任何被禁用的元素。
:in-range
代表一个input元素，其当前值处于属性min 和max 限定的范围之内。
:out-of-range
与:in-range相反。表示一个input元素，其当前值处于属性 min 和 max 限定的范围外。
:checked
表示任何处于选中状态的radio, checkbox 或select元素选中时。
:focus
表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
:empty
:empty伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格），但不包括html注释。
<!-- 这些将是空的 -->
<div></div>
<div><!-- comment --></div>
<!-- 这些将不能满足为空 -->
<div>foo</div>
<div> </div>
<div><span></span></div>
<div> <!-- comment --> </div>:empty伪类的特性可以让我们联想到它非常适合在弹窗、消息提示框等场景下使用。可以根据上下文动态地插入和移除它们中的文本内容。使用:empty伪类，我们可以确保在没有内容的情况下，该框将被隐藏。
浏览器兼容：IE9+。
关于:empty伪类使用场景实例移步到这里。
Flexbox布局
Flexbox是CSS3中为了现代网络中更为复杂的网页需求而设计。因此它也是现代Web布局中的主流方式之一，成为一个新的W3C标准规范。极力推荐阅读这里。
浏览器兼容:
移动端大可放心使用。
letter-spacing
CSS中的letter-spacing属性明确了文字的间距行为。这里我们看一下letter-spacing实现的动画：
<div class="container">
<h2 class="animated">欢迎常来xinran001.com</h2>
</div>@keyframes animation {
from {
letter-spacing: 32px;
}
to {
letter-spacing: 0;
}
}
.animated {
animation: animation 5s ease infinite;
}
h2 {
text-transform: uppercase;
white-space: nowrap;
}
