day13 css選擇器（下）
一．偽類選擇器總匯
選擇器 名稱
說明css 版本
:root
根元素選擇器
選擇文件中的根元素 3
:first-child
子元素選擇器
選擇元素中第乙個子元素2
2 :last-child
子元素選擇器
選擇元素中最後乙個子元素3
3 :only-child
子元素選擇器
選擇元素中唯一子元素3
3 :only-of-type
子元素選擇器
選擇指定型別的唯一子元素 3
:nth-child(n)
子元素選擇器
選擇指定
n 個子元素 3
:enabled
ui 選擇器
選擇啟用狀態的元素 3
:disabled
ui 選擇器
選擇禁用狀態的元素 3
:checked
ui 選擇器
選擇被選中
input
勾選元素 3
:default
ui 選擇器
選擇預設元素 3
:valid
ui 選擇器
驗證有效選擇
input 元素
3 :invalid
ui 選擇器
驗證無效選擇
input 元素
3 :required
ui 選擇器
有required
屬性選擇元素 3
:optional
ui 選擇器
無required
屬性選擇元素 3
:link
動態選擇器
未訪問的超連結元素 1
:visited
動態選擇器
已訪問的超連結元素 1
:hover
動態選擇器
懸停在超連結上的元素 2
:active
動態選擇器
啟用超連結上的元素 2
:foucs
動態選擇器
獲取焦點的元素 2
:not
動態選擇器
否定選擇的元素 3
:empty
動態選擇器
選擇沒有任何內容的元素 3
:lang
動態選擇器
選取包含
lang
屬性的元素 2
:target
動態選擇器 選取
url
片段標識指向元素 3
二．結構性偽類選擇器
1.根元素選擇器
:root
解釋：匹配文件中的根元素，基本不怎麼用，因為總是返回元素。
2.子元素選擇器
ul > li:first-child
解釋：選擇第乙個子元素。
ul > li:last-child
解釋：選擇最後乙個子元素。
ul > li:only-child
解釋：選擇只有乙個子元素的那個子元素。
div > p:only-of-type
解釋：選擇只有乙個指定型別的子元素的那個子元素。
3.:nth-child(n)系列
ul > li:nth-child(2)
解釋：選擇子元素的第二個元素。
ul > li:nth-last-child(2)
解釋：選擇子元素倒數第二個元素。
div > p:nth-of-type(2) ;
解釋：選擇特定子元素的第二個元素。
div > p:nth-last-of-type(2) ;
解釋：選擇特定子元素的倒數第二個元素。
三．ui偽類選擇器
ui 偽類選擇器是根據元素的狀態匹配元素。
1.:enabled
:enabled
解釋：選擇啟用狀態的元素。
2.:disabled
:disabled
解釋：選擇禁用狀態的元素。
3.:checked
:checked
解釋：選擇勾選的 input 元素。
4.:default
:default
解釋：從一組類似的元素中選擇預設元素。比如 input 被勾選的即預設的。
5.:valid和:invalid
input:valid
input:invalid
解釋：輸入驗證合法與不合法顯示時選擇的元素。
6.:required和:optional
input:required
input:optional
解釋：根據是否具有 required 屬性選擇元素。
四．動態偽類選擇器
動態偽類選擇器根據條件的改變匹配元素。
1.:link和visited
a:link
a:visited
解釋：:link 表示未訪問過的超連結，:visited 表示已訪問過的超連結。
2.:hover
a:hover
解釋：表示滑鼠懸停在超連結上。
3.:active
a:active
解釋：表示滑鼠按下啟用超連結時。
4.:focus
input:focus
解釋：表示獲得焦點時。
五．其他偽類選擇器
解釋：否定選擇器，反選。
2.:empty
:empty
解釋：匹配沒有任何內容的元素。
3.:lang
:lang(en)
解釋：選擇包含 lang 屬性，屬性值字首為 en 的元素。和屬性選擇器匹配結果一致。
4.:target
:target
解釋：定位到錨點時，選擇此元素。
5.::selection
::selection
解釋：這是乙個偽元素選擇器，當選擇文字時觸發選擇。css3 版本下的選擇
HTML5學習筆記二 HTML基礎
html 標題 heading 是通過 標籤來定義的.h1 標題一 h1 h2 標題二 h2 h3 標題三 h3 html 段落是通過標籤 來定義的.p 親吻你的手還靠著你的頭 p p 讓你躺胸口 那個人已不是我 p p 這些平常的舉動 p a href 這是我的部落格鏈結 a html 影象是通過...
HTML5基礎學習筆記（十六）
day16 css文字樣式 一 文字總匯 二 文字樣式 css 文字樣式有三種 文字裝飾 英文大小寫轉換和文字陰影。1.text decoration p 解釋 設定文字出現下劃線。屬性值如下表 讓本來有下劃線的超連結取消 a2.text transform p 解釋 設定英文文字轉換為大小寫。p ...
HTML5基礎學習
html5新元素 需要注意 type tel 是為移動端開啟手機鍵盤服務的，網頁端無效果 datetime目前瀏覽器不支援，可用datetime local達到效果。使用者名稱 type text br 密碼 type password br type email br type tel br ty...