伪类选择器,在不同情况下显示的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; }
<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>