CSS 选择器（伪类选择器）

CSS 选择器（伪类选择器）

伪类选择器

为元素的不同状态或不确定存在的元素设置样式规则。

状态	示例	说明
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	选择文档的根元素即html。
:empty	p:empty	选择没有子元素的每个 元素（包括文本节点）。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个 元素的每个 元素
:last-of-type	p:last-of-type	选择属于其父元素的最后 元素的每个 元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 元素的每个 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 元素。
:nth-child(odd)	p:nth-child(odd)	选择属于其父元素的奇数 元素。
:nth-child(even)	p:nth-child(even)	选择属于其父元素的偶数 元素。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 元素的每个 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:not(selector)	:not(p)	选择非 元素的每个元素

:超链接伪类

定义链接的不同状态

a:link {

    color: red

}

 

a:visited {

    color: green

}

 

a:hover {

    color: blue

}

 

a:active {

    color: yellow

}

...

 

<a href="https://blog.csdn.net/weixin_44541438">贼贼</a>

 

不只是链接可以使用伪类，其他元素也可以使用。下面是对表单的点击与获取焦点状态的样式设置。

input:focus {

    background: green;

}

 

input:hover {

    background: blue;

}

 

input:active {

    background: yellow;

}

...

 

<input type="text">

:target

用于控制具有锚点目标元素的样式

div {

    height: 900px;

}

 

div:target {

    color: red;

}

...

 

<a href="#csdn">csdn</a>

<div></div>

<div id="csdn">

    csdn博客首页

</div>

 

:root

根元素选择伪类即选择html

:root {

    font-size: 100px;

}

 

:empty

没有内容和空白的元素。下面第一个p标签会产生样式，第二个不会因为有空白内容

:empty {

    border: solid 2px red;

}

...

 

<p></p>

<p> </p>