首页 > 代码库 > 选择器—伪类选择器

选择器—伪类选择器

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:"[ [ ] ]";}。在某个元素之后插入一些内容

  以上选择器只能应用于标记或段落之类的块级元素上,而不能用于超链接等的行内元素。在伪元素里面使用属性,有一定的限制,并不是所有的属性都可以在伪元素选择器里面使用。

  

选择器—伪类选择器