css僞類和僞元素的學習

最近用js實現一些css效果。發現有不少東西效果其實能夠用僞類或者僞元素實現。特意補充下這方面的知識。 記錄下

爲何引入僞類和僞元素

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

css引入僞類和僞元素概念是爲了格式化文檔樹之外的信息，也就是說。僞類和僞元素是用來修飾不在文檔樹中的部分，好比，一句話中的第一個字母，或者列表中的第一個元素。

僞類用於當已有元素處於的某個狀態時，爲其添加對應的樣式，這個狀態是根據用戶行爲而動態變化的，好比說，當用戶懸停在指定的元素時，咱們能夠用:hover來描述這個元素的狀態。雖然它和普通的css類類似，能夠爲已有的元素添加樣式，可是它只有處於dom樹沒法描述的狀態下才能爲元素添加樣式，因此將其稱爲僞類。

僞元素用戶建立一些不在文檔樹中的元素，併爲其添加樣式，好比說，咱們能夠經過：before來在一個元素前增長一些文本，

僞類

僞類-狀態

1. :link 選擇未訪問的連接
2. :visited 選擇已訪問的連接
3. :hover選擇鼠標指針浮動在其上的元素
4. :active選擇活動的連接
5. :focus 選擇獲取焦點的輸入字段

僞類-結構化

1. :not 一個否認僞類，用於匹配不符合參數選擇器的元素
2. :first-child 匹配元素的第一個子元素
3. :last-child 匹配元素的最後一個子元素
4. :first-of-type 表示一組兄弟元素中其類型的第一個元素
5. :last-of-type 表示一組兄弟元素中其類型的最後一個元素

6. :nth-child 根據元素的位置匹配一個或者多個元素，它接受一個an+b形式的參數

   0n+3或簡單的3匹配第三個元素
   2n+1匹配位置爲1,3,5,7...的元素 你能夠用odd替換奇數行，even代替偶數行

7. :nth-last-child 與:nth-child類似，不一樣之處在於它從最後一個子元素開始計數
8. :nth-of-type與nth-child類似，不一樣之處在於它是隻匹配特定類型的元素
9. :nth-last-type 與nth-of-type類似，不一樣之處在於它是從最後一個子元素開始計數的。
10. :only-child 當元素是其父元素中惟一的子元素時，:only-child匹配該元素
11. :only-of-type 當元素是其父元素中惟一特定類型的子元素時，:only-child匹配該元素
12. :target 當url帶有瞄名稱，指向文檔內某個具體的元素時:target匹配該元素

僞類-表單相關

1. :checked 匹配被選中的input元素，這個input元素包裹radio和checkbox.
2. :default 匹配默認選中的元素
3. :disabled 匹配禁用的表單元素
4. :empty 匹配沒有子元素的元素，若是元素中含有文本節點，html元素或者一個空格，則:empty不能匹配這個元素
5. :enabled 匹配沒有設置disabled屬性的表單元素
6. :in-range 匹配在指定區域內元素，
7. :out-of-range 匹配不在指定區域內的元素
8. :indetermimate 當某組中的單選框或複選框尚未選取狀態時，：indeterminate匹配該組中全部的單選框或複選框
9. :valid 匹配條件驗證正確的表單元素
10. :invalid 匹配提交驗證錯誤的表單元素
11. :optional :required匹配設置有無設置required屬性的表單元素
12. :read-only 匹配設置了只讀屬性的元素
13. ：read-write匹配處於編輯狀態的元素

僞類-其餘關

1. :root 匹配文檔的跟元素
2. :fullscreen 匹配處於全屏模式下的元素

僞元素

有時你會發現僞元素使用了兩個冒號 (::) 而不是一個冒號 (:). 這是CSS3的一部分，並嘗試區分僞類和僞元素. 大多數瀏覽器都支持這兩個值。

1 ::before/:before 在被選元素前插入內容，須要使用content屬性指定要插入的內容。被插入的內容實際上不在文檔樹中

2 ::after/:after 在被元素後插入內容.其用法和特性與:before類似

3 ::first-letter/:first-letter 匹配元素中文本的首字母

4 ::first-line/:first-line匹配元素中第一行的文本，這個僞元素只能用在快元素中。不能用在內聯中

5 ::selection匹配被用戶選擇或者處於高亮狀態的部分，該元素只支持雙冒號的形式

6 ::placeholder 匹配佔位符的文本，只有元素設置placeholder屬性是，該僞元素才能生效。

全文cx痕跡很嚴重。詳細文章請看http://www.alloyteam.com/2016...