CSS最全選擇器

2021-07-05 14:53:39 字數 2885 閱讀 3340

css 選擇器非常豐富,現將 css 1 - 3 目前所有的選擇器列舉如下。

選擇器 例子  例子描述    css版本

.class .intro 選擇 class="intro" 的所有元素。 1

#id #firstname 選擇 id="firstname" 的元素。 1

* * 選擇所有元素。 2

element p 選擇所有 元素。 1

selector,selector div,p 選擇所有 元素和所有 元素。 1

selector selector div p 選擇 元素內部的所有 元素。 1

selector>selector div>p 選擇父元素為 元素的所有 元素。 2

selector+selector div+p 選擇緊接在 元素之後的所有 元素。 2

[attribute] [target] 選擇帶有 target 屬性所有元素。 2

[attribute=value] [target=_blank] 選擇 target="_blank" 的所有元素。 2

[attribute~=value] [title~=flower] 選擇 title 屬性包含單詞 "flower" 的所有元素。 2

[attribute|=value] [lang|=en] 選擇 lang 屬性值以 "en" 開頭的所有元素。 2

:link a:link 選擇所有未被訪問的鏈結。 1

:visited a:visited 選擇所有已被訪問的鏈結。 1

:active a:active 選擇活動鏈結。 1

:hover a:hover 選擇滑鼠指標位於其上的鏈結。 1

:focus input:focus 選擇獲得焦點的 input 元素。 2

:first-letter p:first-letter 選擇每個 元素的首字母。 1

:first-line p:first-line 選擇每個 元素的首行。 1

:first-child p:first-child 選擇屬於父元素的第乙個子元素的每個 元素。 2

:before p:before 在每個 元素的內容之前插入內容。 2

:after p:after 在每個 元素的內容之後插入內容。 2

:lang(language) p:lang(it) 選擇帶有以 "it" 開頭的 lang 屬性值的每個 元素。 2

selector~selector p~ul 選擇前面有 元素的每個 元素。 3

[attribute^=value] a[src^="https"] 選擇其 src 屬性值以 "https" 開頭的每個 元素。 3

[attribute$=value] a[src$=".pdf"] 選擇其 src 屬性以 ".pdf" 結尾的所有 元素。 3

[attribute*=value] a[src*="abc"] 選擇其 src 屬性中包含 "abc" 子串的每個 元素。 3

:first-of-type p:first-of-type 選擇屬於其父元素的首個 元素。 3

:last-of-type p:last-of-type 選擇屬於其父元素的最後 元素。 3

:only-of-type p:only-of-type 選擇屬於其父元素只有唯一的 元素。 3

:only-child p:only-child 選擇屬於其父元素只有唯一的子元素 . 3

:nth-child(n) p:nth-child(2) 選擇屬於其父元素的第二個子元素 . 3

:nth-last-child(n) p:nth-last-child(2) 同上,從最後乙個子元素開始計數。 3

:nth-of-type(n) p:nth-of-type(2) 選擇屬於其父元素第二個 元素。 3

:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是從最後乙個子元素開始計數。 3

:last-child p:last-child 選擇屬於其父元素最後乙個子元素 . 3

:root :root 選擇文件的根元素。 3

:empty p:empty 選擇沒有子元素的每個 元素(包括文字節點)。 3

:target #news:target 選擇當前活動的 #news 元素。 3

:enabled input:enabled 選擇每個啟用的 元素。 3

:disabled input:disabled 選擇每個禁用的 元素 3

:checked input:checked 選擇每個被選中的 元素。 3

:not(selector) :not(p) 選擇非 元素的每個元素。 3

::selection ::selection 選擇被使用者選取的元素部分。 3

:out-of-range input:out-of-range 匹配值在指定區間之外的 元素。 3

:in-range input:in-range 匹配值在指定區間之內的 元素。 3

:read-write input:read-write 匹配可讀可寫的 元素。 3

:optional input:optional 匹配可選輸入的 元素。 3

:required input:required 匹配必須輸入的 元素。 3

:valid input:valid 匹配輸入有效的 元素。 3

:invalid input:invalid 匹配輸入無效的 元素。 3

最全CSS3選擇器

一,css3 選擇器分類 二,選擇器語法 1,基本選擇器語法 選擇器 型別 功能描述 通配選擇器 選擇文件中所以html元素 e元素選擇器 選擇指定型別的html元素 idid選擇器 選擇指定id屬性值為 id 的任意型別元素 class 類選擇器 選擇指定class屬性值為 class 的任意型別...

最全CSS3選擇器

一,css3 選擇器分類 二,選擇器語法 1,基本選擇器語法 選擇器 型別 功能描述 通配選擇器 選擇文件中所以html元素 e元素選擇器 選擇指定型別的html元素 idid選擇器 選擇指定id屬性值為 id 的任意型別元素 class 類選擇器 選擇指定class屬性值為 class 的任意型別...

最全CSS3選擇器

一,css3 選擇器分類 二,選擇器語法 1,基本選擇器語法 選擇器 型別 功能描述 通配選擇器 選擇文件中所以html元素 e元素選擇器 選擇指定型別的html元素 idid選擇器 選擇指定id屬性值為 id 的任意型別元素 class 類選擇器 選擇指定class屬性值為 class 的任意型別...