伪类选择器和伪元素

伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下:

a:link{color:#ff0000;text-decoration:none}
a:visited{color:#00ff00;text-decoration:none}
a:hover{color:#ff00ff;text-decoration:underline}
a:link{color:#0000ff;text-decoration:underline}

在支出CSS的浏览器中,链接的不同状态都可以以不同的方式显示,这些状态包括活动状态、已被访问状态、未被访问状态和鼠标悬停状态。

在CSS定义中,a:hover必须置于a:link和a:visited之后才有效。a:hover必须置于a:hover之后才有效。

伪元素选择器是指并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器,它们的语法结构如下:
选择器:伪元素{属性:值}

在CSS中,主要包括如下4个伪元素选择器:

  1. first-line伪元素选择器 用于为某个元素的第一行文字使用样式。
  2. first-letter伪元素选择器 用于为某个元素中的文字首字母或者第一个(中文或日 文)字使用样式。
  3. before伪元素选择器 用于某个元素之前插入一些内容。
  4. after伪元素选择器 用于在某个元素之后插入一些内容。
    示例:
h1:after,h1:before{
   background-color:#777;
   content:"";
   ...
}
h1:after{
   background-image:
      -webkit-gradient(linear,left top,
      right top,from(#777),to(#fff));
   ...
}
h1:before{
   background-image:
      -webkit-gradient(linear,right top,
      left top,from(#777),to(#fff));
   ...
}

附一些CSS的选择器、例子、例子描述(只有CSS3,不含CSS1和CSS2的)
伪类选择器和伪元素_第1张图片

你可能感兴趣的:(CSS3)