css3伪类

1、focus的时候字体颜色加深

<style type="text/css">
/*正常状态为浅灰色*/
    .icon-search{
        color: #ccc;
    }
input[type=search]:focus + .icon-search{
    color: #111;
}
</style>
<input type="search" />
<span class="icon-search">111</span>

2、如果用户输入不合法，Next按钮是半透明不可点的状态

<style type="text/css">
    .next-step{
        display: inline-block;
        width: 100px;
        height: 30px;
        background: #666;
    }
input[type=email]:invalid + .next-step{
    opacity: 0.5;
}
</style>
<input type="email" />
<span class="next-step">Next</span>	

3、当要实现一个hover的时候显示提示信息，如果用title属性会觉得效果太弱，但是又不想用js写，这个时候用css3的attr属性实现，将要提升的文案放到一个属性里面。

<style type="text/css">
    span[data-title]{
        position: relative;
    }
    span[data-title]:hover:before{
        content: attr(data-title);
        position: absolute;
        top: -100%;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }
</style>
<p>
    hello
    <span data-title="development">
        111111
    </span>
</p>