国产精品另类激情久久久免费,精品午夜在线播放视频,性无码一区二区三区在线观看

點擊上方藍字“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
今天，其實想談一個問題，就是CSS選擇器中的偽元素和偽類選擇器。
CSS的選擇器確實很多，常見我們比較熟悉的ID，標簽，class值等。但是，如果們合理用好偽元素和偽類選擇器的話，不僅可以讓我們的dom結構看著更清晰，同時也能在一定程度上減少JS對DOM的各種操作。
一、從定義上區(qū)別CSS中偽類和偽元素
1、偽類（注重的是元素狀態(tài)的變化）
偽類可以更細的將它分成狀態(tài)偽類和結構性偽類。
狀態(tài)偽類：基于當前元素狀態(tài)進行選擇。就是說，不同的元素狀態(tài)程現(xiàn)不同的元素樣式。
常用的偽類有下面這些：
：hover – 鼠標懸停
： – 激活元素
：focus – 焦點元素
： – 訪問過元素
：link – 未訪問過元素
結構性偽類：它是CSS3的選擇器，選用文檔結構的互相關系來匹配具體哪個元素，這樣就可以減少class和ID的定義。從而簡潔DOM的結構。
常用的偽元素有下面這些：
：first-child
：last-child
：nth-child()
：nth-last-child()
：nth-of-type
：last-of-type
：only-of-type
：empty
等等。這些個偽類其意義都好理解，大家只要注意一下nth-child和nth-of-type的區(qū)別，不太清楚的可以參考我之前寫的一篇文章：。
接下來看一偽元素。
2、偽元素（注重的是元素內容的變化）
偽元素是對特定的內容進行一些個操作，而不是描述元素狀態(tài)，它控制的相當于就是一個元素，可理解于一個元素的抽象，并不存在于文檔結構中。下面看一常用的偽元素會更清晰一點。
常用的偽元素有：
：after – 元素后面添加新內容
【寫CSS代碼時，先理清偽類和偽元素的用法區(qū)別，能讓代碼精簡不少】： – 元素前面添加新內容
：- – 選擇元素第一個字母
：-line – 選擇元素的第一行
關于這些個偽元素實際使用，可以參考我之前的內容。
二、從寫法上區(qū)別CSS中的偽類和偽元素
CSS3標準規(guī)定。
CSS3偽類使用單冒號（:）
CSS3偽元素使用雙冒號（::）
通常我們寫單冒號不出錯是因為，對于 CSS2 中已經有的偽元素ui元素狀態(tài)偽類選擇器ui元素狀態(tài)偽類選擇器，如 :，單冒號和雙冒號的寫法 :: 作用是一樣的。
三、提一下偽元素和偽類的應用
偽元素的應用太多了，這里還包括一些巧用。（具體可以參考之前寫的內容）
1、偽元素的應用
用來清除浮動，如下代碼所示：
2、偽類的應用
設置ul元素中第二個li元素設置成紅色，如下代碼所示：
最后總結一下：
偽類注重是的狀態(tài)的變化，偽元素注重的內容的變化，其中偽元素新添加的內容元素，在用法上跟真正的DOM無本質區(qū)別。普通元素可以實現(xiàn)的效果，偽元素也是可以實現(xiàn)的，合理利用，效果可能會更好，代碼更精簡一些。
本文到此結束，希望對大家有所幫助。

寫CSS代碼時，先理清偽類和偽元素的用法區(qū)別，能讓代碼精簡不少

寫CSS代碼時，先理清偽類和偽元素的用法區(qū)別，能讓代碼精簡不少