【重識 HTML (1)，自學Java教程百度雲盤

• 結構僞類 (structural pseudo-classes)

• • :nth-child()、:nth-last-child()

  • :nth-of-type()、:nth-last-of-type()

  • :empty

  • 等價描述

• 否認僞類 :not()

• 僞元素 (pseudo-elements)

• • ::first-line 對首行文本設置屬性

  • ::first-letter 對首字母設置屬性

  • ::before、::after 在元素內容以前、以後插入其餘內容

博文集合：【重識 HTML + CSS】知識點目錄

僞類 (pseudo-classes)

======================================================================================

常見的僞類有：

• 動態僞類 (dynamic pseudo-classes)

  :link、:visited、:hover、:active、:focus

• 目標僞類 (target pseudo-classes)

  :target

• 語言僞類 (language pseudo-classes)

  :lang()

• 元素狀態僞類 (UI element states pseudo-classes)

  :enabled、:disabled、:checked

• 結構僞類 (structural pseudo-classes)

  :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )

  :first-child、:last-child、:first-of-type、:last-of-type

  :root、:only-child、:only-of-type、:empty

• 否認僞類 (negation pseudo-classes)

  :not()

動態僞類 (dynamic pseudo-classes)

================================================================================================

動態僞類的細節：直接給 a 元素設置樣式，至關於給 a 元素的全部動態僞類都設置

• 下圖效果至關於：a:link、a:visited、a:hover、a:active、a:focus 的 color 都是 red

:link、:visited、:hover、:active

---

使用舉例：

• a:link：未訪問的連接

• a:visited：已訪問的連接

• a:hover：鼠標挪動到連接上

• a:active：激活的連接（鼠標在連接上長按住未鬆開）

使用注意：動態僞類的使用是有順序的，由於後面的樣式會覆蓋前面的樣式

• :hover 必須放在 :link 和 :visited 後面才能徹底生效

• :active 必須放在 :hover 後面才能徹底生效

• 建議的編寫順序：:link、:visited、:hover、:active

除了 a 元素，:hover、:active 也能用在其餘元素上

:focus

---

:focus 指當前擁有輸入焦點的元素（能接收鍵盤輸入）

動態僞類編寫順序：:link、:visited、:focus、:hover、:active

效果示例：

• 文本輸入框一聚焦後，背景就會變紅色：

• 由於連接 a 元素能夠被鍵盤的 Tab 鍵選中聚焦，因此 :focus 也適用於 a 元素

• 去除 a 元素默認的 :focus 效果：

設定元素不會被 TAB 選中，能夠將 tabindex 屬性設置爲 -1

目標僞類 :target

===============================================================================

目標僞類：當元素被錨點連接看成目標跳轉以後起做用

語言僞類 :lang

=============================================================================

元素狀態僞類 :enable、:disable、:checked

===================================================================================================

:enabled：啓用狀態

:disabled：禁用狀態

:checked：被選中狀態

結構僞類 (structural pseudo-classes)

===================================================================================================

:nth-child()、:nth-last-child()

---

用法：nth-child(an + b)

nth-child(1)：父元素中的第1個子元素

• :nth-child(2n)：父元素中第偶數個子元素

  等價於 nth-child(even)

• :nth-child(2n + 1)：父元素中的第奇數個子元素

  等價於 :nth-child(odd)

• :nth-child(-n + 2)：父元素中最前面 2 個子元素

nth-last-child() 語法跟 :nth-child() 相似，不一樣點是 :nth-last-child() 從最後一個子元素開始往前計數

• :nth-last-child(1)：倒數第一個子元素

• :nth-last-child(-n + 2)：最後 2 個子元素

• • *

思考：如何表示第 2 個 ~ 倒數第 2 個元素（去除頭和尾元素）

:nth-of-type()、:nth-last-of-type()

---

:nth-of-type() 用法跟 :nth-child() 相似

• 不一樣點是 :nth-of-type() 計數時只計算同種類型的元素

  :nth-last-of-type() 用法跟 :nth-of-type() 相似

• 不一樣點是 :nth-last-of-type() 從最後一個這種類型的子元素開始往前計數

寫在最後

可能有人會問我爲何願意去花時間幫助你們實現求職夢想，由於我一直堅信時間是能夠複製的。我犧牲了本身的大概十個小時寫了這片文章，換來的是成千上萬的求職者節約幾天甚至幾周時間浪費在無用的資源上。

上面的這些（算法與數據結構）+（Java多線程學習手冊）+（計算機網絡頂級教程）等學習資源我都在這裏公開分享出來

以上個人經歷但願可以給你們帶來幫助，須要這些資料的朋友能夠戳這裏，就能夠免費拿到了