点击这里给我发消息 点击这里给我发消息

HTML 5与CSS 3权威指南:CSS中的伪类选择器及伪元素(2)

添加时间:2013-12-6
    相关阅读: HTML CSS 项目

19.3.1   CSS中的伪类选择器及伪元素(2)

这段代码的运行结果如图19-7所示。

图19-7 first-letter伪元素使用示例

(3)before伪元素选择器

before伪元素选择器用于在某个元素之前插入一些内容,使用方法如下所示。

  //可以插入一段文字

  <元素〉:before

  {

  content:插入文字

  }

  //也可以插入其他内容

  <元素〉:before

  {

  content:url(test.wav)

  }

代码清单19-6是before伪元素选择器的一个使用示例,在该示例中有一个ul列表,该列表中有几个li列表项目,使用before伪元素选择器在每个列表项目的文字的开头插入"."字符。

代码清单19-6   before伪元素选择器的使用示例

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

  <title>before伪元素选择器使用示例</title>

  <style type="text/css">

  li:before{content: 

  </style>

  </head>

  <body>

  <ul>

  <li>列表项目1</li>

  <li>列表项目2</li>

  <li>列表项目3</li>

  <li>列表项目4</li>

  <li>列表项目5</li>

  </li>

  </ul>

  </body>

  </html>

这段代码的运行结果如图19-8所示。

图19-8   before伪元素使用示例

 

咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册