復習一波CSS3選擇器

  1. #class

id選擇器 選擇帶有指定id的元素

  • 不能以數字開頭
  • 不能包含特殊字符(&、@、#、$等)
  • 一個id屬性只能在文檔中使用一次!僅一次!
  1. .class

class選擇器 選擇帶有指定類(class)的元素

  • 最好不要以數字開頭,以免在某些瀏覽器中出現問題
  1. *

通配選擇器 選中所有元素
兩種用法:

  1. 選擇器選取所有元素
  2. 選擇器選擇某個元素下的所有元素。例:選擇div下的所有元素
div * {

}
  1. element

標簽選擇器 選擇指定標簽的元素

  1. element, element

分組選擇器 用于同時選取多個元素

  1. element element

后代選擇器(descendant selector),又稱包含選擇器
div p{ /*匹配div下的p*/ /*匹配祖先元素是div的p*/ }

  1. element > element

    div>p{
        /*選擇父元素為div的p*/
        /*直接子元素*/   
    }
    
  2. element + element

相鄰兄弟選擇器
div+p{ /*選擇div后的p*/ /*兄弟關系*/ }

  1. [attribute]

屬性選擇器
a[target]{ /*匹配帶有target屬性的a標簽*/ }

  1. [attribute=value]

特定屬性選擇器
a[target=_blank]{ /*匹配target="_blank"的a標簽*/ }

  1. [attribute~=value]

包含
[title~=flower]{ /*匹配title屬性中包含"flower"的標簽*/ }

  1. [attribute|=value]

    開頭

    [lang~=zh]{
        /*匹配lang屬性以"zh"開頭的標簽*/
    }
    

    ^的區別:
    |必須是以value值開頭,同時后面必須是中劃線”-“,絕對不能是下劃線”_“,要不就識別不出來

  2. :link

普通的、未被訪問的鏈接

  1. :visited

用戶已訪問的鏈接

  1. :active

鏈接被點擊的時刻

  1. :hover

鼠標指針位于鏈接的上方
#####注意事項:
當為鏈接的不同狀態設置樣式時,請按照以下次序規則:
- a:hover 必須位于 a:link 和 a:visited 之后
- a:active 必須位于 a:hover 之后

  1. :focus

選擇獲得焦點的輸入字段

  1. :first-letter

用于選取指定選擇器的首字母

  1. :first-line

用于選取指定選擇器的首行

  1. :first-child

用于選取屬于其父元素的首個子元素的指定選擇器

  1. :before

在被選元素的內容前面插入內容
用 content 屬性來指定要插入的內容

  1. :after

在被選元素的內容后面插入內容
after偽類清除浮動
:after { content: " "; display: block; height: 0; clear: both; }

  1. :lang

  2. element1~element2

element1 之后出現的所有 element2。
兩種元素必須擁有相同的父元素,但是 element2 不必直接緊隨 element1。

  1. [attribute^=value]

開頭

  1. [attribute$=value]

匹配屬性值以指定值結尾的每個元素

  1. [attribute*=value]

匹配屬性值包含指定值的每個元素

  1. :first-of-type

匹配屬于其父元素的特定類型的首個子元素的每個元素
等同于 :nth-of-type(1)

  1. :last-of-type

匹配屬于其父元素的特定類型的最后一個子元素的每個元素
等同于 :nth-last-of-type(1)

  1. :only-of-type

匹配屬于其父元素的特定類型的唯一子元素的每個元素

  1. :only-child

匹配屬于其父元素的唯一子元素的每個元素

  1. :nth-child()

匹配屬于其父元素的第 N 個子元素,不論元素的類型。
n 可以是數字、關鍵詞或公式。

  1. :nth-last-child()

匹配屬于其元素的第 N 個子元素的每個元素,不論元素的類型,從最后一個子元素開始計數。
n 可以是數字、關鍵詞或公式。

  1. :nth-of-type()

匹配屬于父元素的特定類型的第 N 個子元素的每個元素。
n 可以是數字、關鍵詞或公式。

  1. :nth-last-of-type()

匹配屬于父元素的特定類型的第 N 個子元素的每個元素,從最后一個子元素開始計數。
n 可以是數字、關鍵詞或公式。

  1. :last-child

匹配屬于其父元素的最后一個子元素的每個元素

  1. :root

匹配文檔根元素。
在 HTML 中,根元素始終是 html 元素。

  1. :empty

匹配沒有子元素(包括文本節點)的每個元素

  1. :target

URL 帶有后面跟有錨名稱 #,指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。
:target 選擇器可用于選取當前活動的目標元素。

  1. :enabled

匹配每個已啟用的元素(大多用在表單元素上)

  1. :checked

匹配每個已被選中的 input 元素(只用于單選按鈕和復選框)

  1. :not

匹配非指定元素/選擇器的每個元素

  1. ::selection

匹配被用戶選取的選取是部分

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容