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>