选择器—伪类选择器

标签：行内元素   注意   code   状态   组合   span   nbsp   就会   ora   

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

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

选择器—伪类选择器

标签：行内元素   注意   code   状态   组合   span   nbsp   就会   ora   

原文地址：http://www.cnblogs.com/zc168/p/7066746.html