CSS 偽選擇器

2021-06-21 14:28:20 字數 3042 閱讀 1532

今天在寫看元件**時,看到了css選擇器,是如此強大,有些東西就沒有根本不了解,這裡mark下,以備後續之用

選擇器例子

例子描述

css.class

.intro

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

1#id

#firstname

選擇 id="firstname" 的所有元素。1*

*選擇所有元素。

2element

p選擇所有 元素。

1element,element

div,p

選擇所有 元素和所有 元素。

1element element

div p

選擇 元素內部的所有 元素。

1element 選擇器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background-color:transparent" rel="noopener noreferrer">element>element

div>p

選擇父元素為 元素的所有 元素。

2element+element

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 屬性值的每個 元素。

2element1~element2

p~ul

選擇前面有 元素的每個 元素。

選擇其 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

CSS選擇器 偽元素選擇器

css選擇器 偽元素選擇器 偽元素以 開頭,用在選擇器後,用於選擇指定的元素。after選中之後的不存在的節點,可配合content屬性進行內容填充 section h3 after before選中之前的不存在的節點,可配合content屬性進行內容填充 section h3 before fir...

css選擇器 偽類選擇器 屬性選擇器

偽類選擇器 nth of type index index 同型別兄弟元素中的排名 屬性選擇器 attr val attr 屬件名稱 val 屬性值 屬性選擇器 href val 表標屬性的結尾 屬性選擇器 class tap 表示屬的開頭 first child選擇第乙個 元素 nth of ty...

css選擇器2 偽類選擇器

一.偽元素選擇器 1.e first letter e first letter css3時代兩個冒號 設定元素內的第乙個字元的樣式。例如 p first letter2.e first line e first line 設定元素內的第一行的樣式。例如 p first line3.e before...