css伪类选择器有哪些

html-css017

css伪类选择器有哪些,第1张

1、动态伪类选择器

不同的状态，使用不同的样式。

E: link

E: visited

E: active

E: hover

E: focus

2、目标伪类选择器

用来匹配页面的URI中某个标识符的目标元素。

E: target

选择匹配E的所有元素，且匹配元素被相关URL指向。

3、语言伪类选择器

用来匹配使用指定语言的元素。

E: lang(language)

4、元素状态伪类选择器

当元素处于某种状态下时，才起作用，在默认状态下不起作用。

E: checked

eg: input[type="checkbox"]:checked{}

E: enabled

eg: input[type="text"]:checked{}

E: disabled

eg: input[type="text"]:disabled{}

5、结构伪类选择器

这个就比较多了，平时用的也比较频繁。

: nth-child

: nth-last-child

: nth-of-type

: nth-last-of-type

: first-child

: last-child

: only-child

: first-of-type

: last-of-type

: only-of-type

: root 匹配元素所有在文档的根元素

: empty 选择没有子元素的元素，且不包含节点

6、否定伪类选择器

E: not(F) 匹配所有除F外的E元素

:first-of-typep:first-of-type选择属于其父元素的首个 <p>元素的每个 <p>元素。

:last-of-typep:last-of-type选择属于其父元素的最后 <p>元素的每个 <p>元素。

:only-of-typep:only-of-type选择属于其父元素唯一的 <p>元素的每个 <p>元素。

:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p>元素。

:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p>元素。

:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。

:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p>元素的每个 <p>元素。

:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。

:last-childp:last-child选择属于其父元素最后一个子元素每个 <p>元素。

:root:root选择文档的根元素。

:emptyp:empty选择没有子元素的每个 <p>元素（包括文本节点）。

:target#news:target选择当前活动的 #news 元素。

:enabledinput:enabled选择每个启用的 <input>元素。

:disabledinput:disabled选择每个禁用的 <input>元素

:checkedinput:checked选择每个被选中的 <input>元素。

:not(selector):not(p)选择非 <p>元素的每个元素。

::selection::selection选择被用户选取的元素部分。