网页设计与开发第9章CSS中的选择器.ppt

在浏览器中浏览该页面，将看到如图9-4所示的效果。 图9-4 first-line选择器运行效果 before伪元素选择器用于在某个元素之前插入一些内容，使用方法如下。 //可以插入一段文字 元素: before { content：插入文字 } //也可以插入其他内容 元素：before { content：url(test.MP4) } 【例9-5】 下面是一个使用before伪元素选择器的一个使用实例，在该实例中有一个ul列表，该列表中有几个li列表项目，使用before伪元素选择器在每个列表项目的文字的开头插入“*”字符。实例代码如下。 titlebefore伪元素选择器使用示例/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 在浏览器中浏览该页面，将看到如图9-5所示的效果。 图9-5 before选择器运行效果 after伪元素选择器用于在某个元素之后插入一些内容，使用方法如下。 元素: after { content：插入文字 } //也可以插入其他内容 元素：after { content：url(test.MP4) } 【例9-6】 下面是一个使用after伪元素选择器的一个使用实例，在该实例中有一个ul列表，这个列表的内容为某个网站上播放音乐类型的清单。该列表中有几个列表项目，每个列表项目中存放了对于某类音乐的超链接，使用after伪元素选择器在每个超链接的后面加入“（点击类型获取更多好听的音乐）”的文字，并且将文字颜色设为红色。实例代码如下。 style type=text/css li:after{ content: （点击类型获取更多好听的音乐）; font-size:12px; color:red; } /style /head body h1都市聆听/h1 ul lia href=movie1.mp3民歌/a/li lia href=movie2.mp3流行/a/li lia href=movie3.mp3歌剧/a/li /ul /body /html 在浏览器中浏览该页面，将看到如图9-6所示的效果。 图9-6 after选择器运行效果 通用兄弟元素选择器（E~F）用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，它的使用方法如下。 子元素 ~子元素之后的同级兄弟元素{ //指定样式 } 注意：这里的同级是指子元素和兄弟元素的父元素是同一个元素。 9.4 通用兄弟元素选择器程 【例9-7】 下面看一个通用兄弟元素选择器的使用实例，该实例中对所有div元素之后的、与div元素同级的p元素指定其背景色为绿色，但是对div元素内部的p元素的背景色不做指定。其实现的代码如下。 html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / style type=text/css div ~ p {background-color:#00FF00;} /style title通用兄弟元素选择器 E ~ F/title /head body div style=width:733px; border: 1px solid #666; padding:5px; div p弃我去者， 昨日之日不可留/p p乱我心者， 今日之日多烦忧/p /div hr / p长风万里送秋雁， 对此可以酣高楼/p p蓬莱文章建安骨， 中间小谢又清发/p hr / p俱怀逸兴壮思飞， 欲上青天览明月素/p hr / div抽刀断水水更流， 举杯销愁愁更愁/div hr / p人生在世不称意， 明朝散发弄扁舟/p /div /body /html 在浏览器中浏览该页面，将看到如图9-7所示的效果。 图9-7 通用兄弟元素选择器的使用实例 现在很多应用程序都可以随机更换皮肤，例如QQ聊天工具、迅雷下载工具等。可以说随机改变“皮肤”已经成为了一种时尚。为了让读者能体会到编程的乐趣，这里通过JavaScript脚本来控制CSS样式来实现一个简单的随机改变页面背景色的实例，当鼠标点击页面中的任何位置时，就可以随机改变页面的背景色，本例的运行效果如图9-8所示。