CSS偽類的使用(css事件)
轉載請注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html
之前有開發開發App的時候，有同事問我那個列表的條目按下去背景會變成淡黃色的效果是怎么做的，然后我若無其事的說了句：用CSS事件啊。。。╮(￣▽￣)╭，然后同事不解的回到座位后在代碼中狂找...🤔，嗯~最終效果實現與否就不得而知啦~；最近稍仔細的翻翻相關文章才知道類似於JavaScript中的事件的東西叫做“偽類”，是CSS中特有的一種東西ヽ(^o^)丿，大多時候很少很少用到，這個叫做“偽類”的東東一般只有html的標簽用到，很簡單，。。。但，因為簡單，所以要實現稍微復雜的功能還是依靠JavaScript哈~，嗯哼，先放張圖把，到底什么是“偽類”，看過之后瞬間秒懂~ (｡♥‿♥｡)
看完，我來先小小地總結下，CSS偽類在每一代CSS標准中都會擴充一些，由於暫時用得最多的大致有以下五個(只是對於我來說哈~（￣。。￣）)：
| 偽類 | 偽類描述 |
|---|---|
| :active | 點按，向被激活的元素添加樣式。 |
| :focus | 焦點輸入，向擁有鍵盤輸入焦點的元素添加樣式。 |
| :hover | 當鼠標懸浮在元素上方時，向元素添加樣式。 |
| :link | 鏈接未訪問，向未被訪問的鏈接添加樣式。 |
| :visited | 鏈接已訪問，向已被訪問的鏈接添加樣式。 |
要使用這些偽類的話，樣式該怎么寫呢，。。。以下舉個🌰例子，比如說:focus -->
1 這是一個輸入框：<input class="input" type="text" value="999" nameo="textInput"/>
2
3 這是對輸入框定義的默認CSS： 4 .body .input{ 5 width:100px; 6 height:40px; 7 border-radius: 13px; 8 } 9
10 這是對輸入框“獲取焦點”后應用的CSS: 11 .body .input:focus{ 12 background-color:mediumpurple; 13 }
真實的效果：
（默認樣式）
（獲取焦點后的樣式）
看完是不是超級簡單，有木有~；這幾需要說明幾點：
A>以上可以只對輸入框定義一個獲取焦點后的(:focus)樣式，就可以看出效果啦，遂，在開發的時候如果不是特別復雜的樣式效果，切勿輕易動用JavaScript來控制dom的樣式
B>大多瀏覽器對於直接調試帶有偽類的樣式較為麻煩，比如Chrome的不同版本可以不會顯示dom的偽類樣式,建議大家先寫成普通樣式調試成功后再改回dom的偽類樣式,這樣較為nice
C>dom(標簽)的所有樣式只能定義在樣式文件或單獨的<style></style>區域中，不可定義在dom中
這些懂了吧~。。。<(￣︶￣)>；以上只是定義了所列舉的部分偽類的樣式效果，下面把剩余的幾種偽類效果也展示下，方便讀者參考👇。
==> :active
(點按之前）
（點按之后）
==》 :hover
（鼠標位於dom之上前）
（鼠標未於dom之上后）
==》 :link
（鏈接未訪問）
==》 :visited
(鏈接未訪問前)
(鏈接已訪問)
OK👌，既已明白，我也該睡覺覺~\(≧▽≦)/~啦啦啦，現在是：2017-11-13 22:10:15
夢游中：啊~哈~~，明天又是工作日，真美好的一天😊 ( 明天遲到，看我怎么收拾你😡 )