選擇器
示例示例說明
:checked
input:checked
選擇所有選中的表單元素
:disabled
input:disabled
選擇所有禁用的表單元素
:empty
p:empty
選擇所有沒有子元素的p元素
:enabled
input:enabled
選擇所有啟用的表單元素
:first-of-type
p:first-of-type
選擇的每個 p 元素是其父元素的第乙個 p 元素
:in-range
input:in-range
選擇元素指定範圍內的值
:invalid
input:invalid
選擇所有無效的元素
:last-child
p:last-child
選擇所有p元素的最後乙個子元素
:last-of-type
p:last-of-type
選擇每個p元素是其母元素的最後乙個p元素
:not(selector)
:not(p)
選擇所有p以外的元素
:nth-child(n)
p:nth-child(2)
選擇所有 p 元素的父元素的第二個子元素
:nth-last-child(n)
p:nth-last-child(2)
選擇所有p元素倒數的第二個子元素
:nth-last-of-type(n)
p:nth-last-of-type(2)
選擇所有p元素倒數的第二個為p的子元素
:nth-of-type(n)
p:nth-of-type(2)
選擇所有p元素第二個為p的子元素
:only-of-type
p:only-of-type
選擇所有僅有乙個子元素為p的元素
:only-child
p:only-child
選擇所有僅有乙個子元素的p元素
:optional
input:optional
選擇沒有"required"的元素屬性
:out-of-range
input:out-of-range
選擇指定範圍以外的值的元素屬性
:read-only
input:read-only
選擇唯讀屬性的元素屬性
:read-write
input:read-write
選擇沒有唯讀屬性的元素屬性
:required
input:required
選擇有"required"屬性指定的元素屬性
:root
root
選擇文件的根元素
:target
#news:target
選擇當前活動#news元素(點選url包含錨的名字)
:valid
input:valid
選擇所有有效值的屬性
:link
a:link
選擇所有未訪問鏈結
:visited
a:visited
選擇所有訪問過的鏈結
:active
a:active
選擇正在活動鏈結
:hover
a:hover
把滑鼠放在鏈結上的狀態
:focus
input:focus
選擇元素輸入後具有焦點
:first-letter
p:first-letter
選擇每個元素的第乙個字母
:first-line
p:first-line
選擇每個元素的第一行
:first-child
p:first-child
選擇器匹配屬於任意元素的第乙個子元素的 元素
:before
p:before
在每個元素之前插入內容
:after
p:after
在每個元素之後插入內容
:lang(language)
p:lang(it)
為元素的lang屬性選擇乙個開始值
詳細理論講解請前前往：最全css3選擇器
含案例講解請前往：
CSS偽類選擇器
原來學習過css偽類選擇器，前幾天寫css發現自己並不熟悉了。這兩天把它撿起來複習一下 css偽類選擇器是用於向某些元素新增特定的效果。錨偽類 包括四種狀態，活動狀態，未被訪問狀態，已被訪問狀態，懸停效果。example a link a visited a hover a active fist ...
css偽類選擇器
link 設定超連結的預設樣式 例如 a a link 不推薦使用 有相容性 one link 不推薦使用 有相容性 visited 設定標籤被訪問過後的樣式 例如 a visited 注意 該偽類選擇器一般不會大量使用，因為瀏覽器存在快取問題。只能設定與顏色相關的屬性 hover 設定滑鼠懸停到標...
css偽類選擇器
名稱 說明ele not 匹配除了誰。裡面填條件，也就是選擇器。ele root 匹配根目錄的意思，在html裡是選 html標籤 ele target url錨點 指向文件內某個具體的元素。那麼該元素就會觸發 target ele first child 匹配父元素下的第乙個子元素必須有父元素，最...