CSS選擇器之偽類選擇器(互動)

2022-08-16 10:42:13 字數 2068 閱讀 9174

:link

選取未訪問鏈結

:active

選取活動鏈結(單擊某鏈結,未鬆開滑鼠時)。

:visited

選取已被訪問的鏈結。

:target

鏈結指定的目標

:hover

當滑鼠浮在元素上方時。

:empty

[css3]選擇的元素裡面沒有任何內容(ie6-8不支援)

:not

[css3]排除特定的元素(ie6-8不支援)

:focus

當使用者點選或觸控元素或通過鍵盤的「tab」鍵選擇它時會被觸發。(ie7及以下不支援)

:focus-within

表示乙個元素獲得焦點,或,該元素的後代元素獲得焦點。(ie11及以下不支援)

:enabled

[css3]可以使用時

:disabled

[css3]不可以使用時

:read-only

[css3]唯讀時(ie和火狐不支援)

:read-write

[css3]可讀可寫時(ie和火狐不支援)

:checked

[css3]被勾選之後(只能在歐鵬瀏覽器中使用)

:default

表示一組相關元素中的預設表單元素。(ie11及以下不支援)

:indeterminate

表示狀態不確定的表單元素(比如多選框,都沒選時)。(相容性也不怎麼好)

:invalid

[css3]內容或其他有效時(ie9及以下不支援)

:valid

[css3]內容或其他無效時(ie9及以下不支援)

:required

[css3]支援這個屬性,並且定義了required的(ie9及以下不支援)

:optional

支援requried屬性,但是沒有定義的(ie9及以下不支援)

:in-range

在範圍內的(ie9及以下不支援)

:out-of-range

超出範圍的(ie9及以下不支援)

解決方式:解決方法是改變css屬性的排列順序: l-v-h-a(link,visited,hover,active)。

target偽類也與a標籤有關,有的頁面中會有錨點,這個概念這裡就不展開了,比如下面的例子:

示例1|

示例2|

示例3|

示例4|

示例5..此處省略..

..此處省略..

..此處省略..

..此處省略..

..此處省略..

渲染的頁面如下所示(加入樣式div:target):

點選上面的鏈結,會給不同的div的背景色改變為紅色。

hover、focus-within、empty、not

:hover這個用的很廣泛,就不多做介紹了。

:focus-within,舉例說明這個的用法,比如

,div:focus-within ,那麼在input獲得焦點之後,整個div的背景色會成為紅色。這個偽類是新出來的,只有較新的瀏覽器才支援(具體需要查閱),但ie11和edge都不支援,所以就不要想著用它了。

:empty很好理解,若元素內部既沒有子元素,也沒有文字(這裡我們稱之為沒有內容),那麼它就是empty。p:empty將會選擇頁面中所有沒有內容的p標籤。

:not()是個帶引數的偽類,進去的引數可以是所有的基本選擇器,基本選擇器有哪些參見我的另外一篇博文。下面通過.button:not(input)這個例子來講解原理:首先選擇所有class為button為元素,然後剔除掉其中標籤為input的元素。

focus:

當選擇其中乙個input框進行輸入時,其背景色為黃色。

enabled和disabled:

first name和last name輸入框都是enabled,背景色為黃色,而country是disabled,背景色是紅色。

input:read-write

input:read-only

$1背景色為黃色,$2背景色為紅色。

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...

屬性選擇器,偽類選擇器,偽元素選擇器

屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...