CSS中伪类的使用

原文出处： http://hszy00232.blog.163.com/blog/static/43022753201131641141494/

何为伪类？

也就是实际实现了类的效果，但是并没有实际添加到标签中的类，这样的就是伪类。伪类的典型构成就是使用了（:）冒号。

1.先说最常用的a链接的伪类，目前市场上的主流浏览器都支持。

:link 链接样式

:visited 链接访问过后的样式（只要访问历史记录存在）

:hover 鼠标悬停样式

:active 鼠标按下样式

其中有些规则，需要按着（Love ha）的顺序样式才会生效。

而且这4个伪类不只可以用在a链接上，也可以用在其他元素上，当然最常的是:hover来实现翻转效果,但IE6对于元素的hover不支持，IE7也要在DOCTYPE为strict时，才支持，比如

  
  

   
   <
   
   style 
   
   type
   
   ="text/css"
   
   >
   
   
 
   
   img:hover
   
   {
   
   border
   
   :
   
   1px solid #000
   
   ;
   
   }//IE6不支持
   
   

   
   </
   
   style
   
   >
   
   

   
   <
   
   img 
   
   src
   
   ="image/1.png"
   
   />
  
  

为了实现兼容可以引入javascript实现

2.Selector:first-child 匹配作为其父元素的第一个子元素的任何元素。（IE7及以上，及其他主流浏览器支持）

Selector:指定的标签名称

嵌入式文本并不被视为文档树的一部分，而且在计算第一个子元素时不会将其计算在内。例如，在以下 HTML 代码中，EM 元素是 P 元素的第一个子元素：

<p>abc <em>default</em> def</p>

在以下示例中，选择器匹配元素UL的第一个子元素LI，给第一个LI添加文字加粗样式 ：

  
  

   
   <
   
   style 
   
   type
   
   ="text/css"
   
   >
   
   
   li:first-child
   
   {
   
   font-weight:bold;
   
   }
   
   

   
   </
   
   style
   
   >
   
   

   
   <
   
   ul
   
   >
   
   

   
   <
   
   li
   
   >
   
   Intert Key
   
   </
   
   li
   
   >
   
   

   
   <
   
   li
   
   >
   
   Turn key 
   
   <
   
   strong
   
   >
   
   clockwise
   
   </
   
   strong
   
   ></
   
   li
   
   >
   
   

   
   <
   
   li
   
   >
   
   Push accelerator
   
   </
   
   li
   
   >
   
   

   
   </
   
   ul
   
   >
  
  

在这个示例中，选择器匹配所有.note类下的第一个P元素，给该元素添加文字加粗样式：

  
  

   
   <
   
   style 
   
   type
   
   ="text/css"
   
   >
   
   
.note p:first-child
   
   {
   
   font-weight
   
   :
   
   bold
   
   ;
   
   }
   
   

   
   </
   
   style
   
   >
   
   

   
   <
   
   div 
   
   class
   
   ="note"
   
   >
   
   
   
   
   <
   
   p
   
   >
   
    The first P inside the note. 
   
   </
   
   p
   
   >
   
   

   
   </
   
   div
   
   >
   
   

   
   <
   
   div 
   
   class
   
   ="note"
   
   >
   
   
   
   
   <
   
   p
   
   >
   
    The first P inside the note. 
   
   </
   
   p
   
   >
   
   

   
   </
   
   div
   
   >
  
  

应用于：A、ABBR、ACRONYM、ADDRESS、B、BIG、BLOCKQUOTE、BODY、CAPTION、CENTER、CITE、CODE、COL、COLGROUP、DD、DFN、DIV、DL、DT、EM、FORM、HN、HTML、I、IMG、INPUT、LI、OL、P、S、SELECT、SPAN、SUB、TABLE、TBODY、TD、TFOOT、TH、THEAD、TR、TT、U、UL、VAR、XM

3.Selector:first-letter 设置对象内第一个字符的样式（IE7及以上，及其他主流浏览器支持）

:first-letter 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定position属性为absolute，或者设定display属性为block。

伪元素可用于创建常见的印刷效果，例如首字大写。在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。 

此示例实现首字大写，内联对象改变position之后也可以应用该伪类。

  
  

   
   <
   
   style 
   
   type
   
   ="text/css"
   
   >
   
   
p:first-letter
   
   {
   
   font-size
   
   :
   
   200%
   
   ;
   
   }
   
   
span:first-letter
   
   {
   
   font-size
   
   :
   
   24px
   
   ;
   
   }
   
   
span
   
   {
   
   position
   
   :
   
   absolute
   
   ;
   
   }
   
   

   
   </
   
   style
   
   >
   
   

   
   <
   
   p
   
   >
   
   此伪对象仅作用于块对象。
   
   </
   
   p
   
   >
   
   

   
   <
   
   span
   
   >
   
   Test！！！
   
   </
   
   span
   
   >
  
  

此示例实现首字下沉效果

  
  

   
   <
   
   style 
   
   type
   
   ="text/css"
   
   >
   
   
p:first-letter
   
   {
   
   font-size
   
   :
   
   200%
   
   ;
   
   float
   
   :
   
   left
   
   ;
   
   }
   
   
span:first-letter
   
   {
   
   font-size
   
   :
   
   24px
   
   ;
   
   }
   
   
span
   
   {
   
   position
   
   :
   
   absolute
   
   ;
   
   }
   
   

   
   </
   
   style
   
   >
   
   

   
   <
   
   p
   
   >
   
   此伪对象仅作用于块对象。
   
   </
   
   p
   
   >
   
   

   
   <
   
   span
   
   >
   
   Test！！！
   
   </
   
   span
   
   >
  
  

4.Selector:first-line 设置对象内第一行的样式（IE7及以上，及其他主流浏览器支持）

:first-line 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定position属性为absolute，或者设定display属性为block。

如果未强制指定对象的width属性， 首行的内容长度可能不是固定的。

  
  

   
   .newsitem:first
   
   -
   
   line {font
   
   -
   
   size: 14pt;}
.newsitem{width:200px;}

   
   <
   
   div 
   
   class
   
   =
   
   "
   
   newsitem
   
   "
   
   >
   
   New features 
   
   in
   
    Internet Explorer 
   
   5.5
   
    include 
the first
   
   -
   
   line pseudo
   
   -
   
   element. This allows authors to create
typographical effects that are applied to the first line of a block 
of text.
   
   </
   
   div
   
   >
  
  

5.selector:focus 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式表属性。 (IE8及以下不支持，其他主流浏览器支持)

  
  

   
   <
   
   style 
   
   type
   
   ="text/css"
   
   >
   
   
input:focus
   
   {
   
   border
   
   :
   
   2px solid red
   
   }
   
   

   
   </
   
   style
   
   >
   
   

   
   <
   
   input 
   
   type
   
   ="text"
   
    value
   
   ="请输入"
   
   />
  
  

6.selector:before,selector:after 用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容,也就是在对象前、后添加指定的文本。（IE8及以下不支持，其他主流浏览器支持）

  
  

   
   <
   
   html
   
   >
   
   

   
   <
   
   head
   
   >
   
   

   
   <
   
   style 
   
   type
   
   ="text/css"
   
   >
   
   
p:before
   
   {
   
   content
   
   :
   
   url('image/log.png')
   
   }
   
   
p:after
   
   {
   
   content
   
   :
   
   '这是一段话的结束！'
   
   }
   
   

   
   </
   
   style
   
   >
   
   

   
   </
   
   head
   
   >
   
   

   
   <
   
   body
   
   >
   
   

   
   <
   
   p
   
   >
   
   目前还没有互动观点，输入您的互动观点。
   
   </
   
   p
   
   >
   
   

   
   </
   
   body
   
   >
   
   

   
   </
   
   html
   
   >
  
  

因为搜索引擎不会收录伪元素生成的内容，所以使用时需要注意

7.还有其他4种伪类:first,:left,:right,:lang。

:lang 设置对象使用特殊语言的内容样式表属性

:first 设置页面容器第一页使用的样式表属性。仅用于@page规则，应用于媒体如打印，而不是在浏览器中显示内容

:left 设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则，应用于媒体如打印，而不是在浏览器中显示内容

:right 设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则，应用于媒体如打印，而不是在浏览器中显示内容

这些伪类使用范围很窄并且也没有获得浏览器的一致支持。