首页 > 代码库 > 选择器—伪类选择器
选择器—伪类选择器
1、链接伪类
:link 指示作为超链接并指向一个未访问的地址的锚
:visited 指示作为已访问地址超链接的所有锚
可以对链接伪类进行颜色,样式等属性的设置。
1 a:link{ 2 color:blue; 3 text-decoration:line-through; 4 } 5 a:visited{ 6 color:red; 7 }
2、动态伪类
:focus 指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素
:hover 指示鼠标指针停留在哪个元素上
:active 指示被用户输入激活的元素,例如鼠标指针停留在一个超链接上,如果用户点击鼠标,就会激活这个超链接。
3、以上伪类用的最多的是在超链接的设置上,伪类的顺序很重要,通常的为 link—visited—focus—hover—active。动态伪类可以应用到任何元素上。
4、选择第一个子元素
可以使用静态伪类 first—child来选择第一个子元素
1 span:first-child{ 2 color:red; 3 } 4 li:first-child{ 5 color:red; 6 } 7 p:first-child{ 8 color:red; 9 } 10 <p>第一个段落</p> 11 <p>第二个段落</p> 12 <ul> 13 <li>第一个序列</li> 14 <li>第<span>span</span>二个序<span>span7</span>列</li> 15 </ul> 16 <ul> 17 <li>第三个序列</li> 18 <li>第四个序列</li> 19 </ul>
5、伪类组合
可以把伪类进行组合使用,但是要注意不要把互斥的伪类组合在一起。比如一个超链接不可能同时是未访问和已访问两种状态
a:link:hover{color:red;}
a:visited:hover{color:maroon;}
6、伪元素选择器
设置首字母样式: P:first-letter{color:red;}。为某个元素中的文字的首字母或第一个字使用样式
设置第一行样式: P:first-line{color:blue;}。为某个元素的第一行文字使用样式
设置之前的样式: p:before{content:"[ [ ] ]";}。在某个元素之前插入一些内容
设置之后的样式: p:after{content:"[ [ ] ]";}。在某个元素之后插入一些内容
以上选择器只能应用于标记或段落之类的块级元素上,而不能用于超链接等的行内元素。在伪元素里面使用属性,有一定的限制,并不是所有的属性都可以在伪元素选择器里面使用。
选择器—伪类选择器