css僞類的說明以及使用(css事件)

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

　　夢遊中：啊~哈~~，明天又是工做日，真美好的一天😊 ( 明天遲到，看我怎麼收拾你😡 )