第9节 CSS3基础.ppt

在浏览器中浏览该页面，将看到如图9-20所示的效果。 图9-20 E:default伪类选择器的使用实例 5．E::selection伪类选择器 E::selection伪类选择器用来指定当前处于选中状态时的样式。 【例9-14】 下面是一个E:default选择器的使用实例，在该实例中应用E:default选择器对选中的内容进行描红。其实现的代码如下： html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title UI元素状态的伪类选择器 /title style type=text/css td { border:1px solid black; padding:4px; } /* 为有内容被选择的元素设置CSS样式 */ ::selection { background-color: red; color: white; } /* 专为基于Gecko内核浏览器指定CSS样式： 为有内容被选择的元素设置CSS样式 */ ::-moz-selection { background-color: red; color: white; } /style /head body table style=width:400px;border-collapse:collapse tr tdPHP编程词典/tdtd298/td /tr tr tdPHP开发实战1200例/tdtd89/td /tr tr contentEditable=true tdPHP自学手册/tdtd69/td /tr /table /body /html 在浏览器中浏览该页面，将看到如图9-21所示的效果。 图9-21 E::selection伪类选择器的使用实例 9.3.5 通用兄弟元素选择器 通用兄弟元素选择器（E~F）用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，它的使用方法如下。 子元素 ~子元素之后的同级兄弟元素{ //指定样式 } 注意： 这里的同级是指子元素和兄弟元素的父元素是同一个元素。 【例9-15】 下面看一个通用兄弟元素选择器的使用实例，该实例中对所有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-22所示的效果。 图9-22 通用兄弟元素选择器的使用实例 9.4 综合实例——生动的列表导航 网站的导航是一个网站的指南针，作为这么重要的一项，对导航的设计也是多姿多彩的，而导航的展现形式也是很多样的。本例中就模仿新浪网的导航制作了一个以列表形式展示的导航，运行效果如图9-23所示。 图9-23 生动的列表导航 实现本例主要是使用结构伪类选择器来制作导航列表样式，充分演示了结构伪类在多列表结构中的应用价值。本上机实践的关键代码参考如下： 程序开发步骤如下： （1）新建一个index.html页面，在该页的body部分编写列表导航菜单，代码如下： body h1制作生动的列表/h1 div id=menu ul li 新闻/li li军事/li li社会 /li li 财经/li li