伪类选择器，在不同情况下显示的css，伪类选择器在处理页面的美观是很大帮助。其实很多美丽的按钮或者页面都是有这些基础的知识实现的，掌握好基础很重要。
|
名字 |
实例 |
说明 |
|
:link |
a:link |
选择所有未被访问的链接 |
|
:visited |
a:visited |
被访问的链接 |
|
:active |
a:active |
所有活动的链接 |
|
:hover |
a:hover |
鼠标所在的链接 |
|
:focus |
Input:focus |
获得焦点的input的css |
|
:first-letter |
P:first-letter |
P元素的首字母样式 |
|
:first-line |
P:first-line |
P元素的首行样式 |
|
:first-child |
P:first-child |
选择属于父元素的第一个子元素的每个 <p> 元素。 |
|
:before |
P:before |
P元素之前插入信息 |
|
:after |
P:after |
P元素之后插入信息 |
|
:lang(langugae) |
P:lang(it) |
选择以it开头的所有p元素 |
|
:first-of-type |
P:first-of-type |
选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
|
:last-of-type |
P:last-of-type |
选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
|
:only-of-type |
P:only-of-type |
选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 |
|
:only-child |
P:only-child |
选择属于其父元素唯一子元素的所有p元素 |
|
:nth-child(n) |
P:nth-child(2) |
选择属于其父元素的第二个子元素的每个 <p> 元素。 |
|
:nth-last-child(n) |
P:nth-last-child(2) |
从最后一个元素开始计数，选择属于其父元素的第二个子元素的每个 <p> 元素。 |
|
:nth-of-type(n) |
P:nth-of-type(2) |
选择属于其父元素的第二个p元素的每个p元素 |
|
:nth-last-of-type(n) |
P:nth-last-of-type(2) |
从最后开始计数的选择属于器父元素第二个p元素的每个p元素 |
|
:last-child |
P:last-child |
选择其父元素的最后一个元素的每个p元素 |
|
:root |
:root |
根元素的css |
|
:empty |
P:empty |
选择没有子元素的每个p元素，包含文本信息 |
|
:target |
#new:target |
当前活动的#new元素 |
|
:enabled |
Input:enabled |
选择每个启用的input元素 |
|
:disabled |
Input:disabled |
选择每个禁用的input元素 |
|
:checked |
Input:checked |
选择被选择的input元素 |
|
:not(selector) |
:not(p) |
选择非p元素的元素 |
|
::selection |
::selection |
选择被用户选取的部分元素 |
列举实例：
/* 未被访问时，正常情况下*/
a:link{color: #ff3324;}
/*点击后时的状态*/
a:visited{color: #1E7DB9;}
/*活动的链接*/
a:active{color: #24d432;}
/*鼠标所在的链接*/
a:hover{color:#fcc100;}
#p1:before,#p2:before,#p3:before{
content: '我是p元素的前方！';
color:#b82929;
}
#p1:after,#p2:after,#p3:after{
content: '我是p元素的后方！';
color: #5eac6e;
}
-->
#p1:before,#p2:before,#p3:before{ content: '我是p元素的前方！'; color:#b82929; }
#p1:after,#p2:after,#p3:after{ content: '我是p元素的后方！'; color: #5eac6e; }
<p id="p1">你好，我是p1元素。</p> <p id="p2">你好，我是p2元素。</p> <p id="p3">你好，我是p3元素。</p>
你好，我是p1元素。
你好，我是p2元素。
你好，我是p3元素。
p:first-child{
color: #b82929;
}
<div id="div1">
<p>你好！</p>
<p>你好！</p>
</div>