读书频道 > 网站 > 网页设计 > HTML 5与CSS 3权威指南(第3版·下册)
19.5 通用兄弟元素选择器
15-10-12    下载编辑
收藏    我要投稿   
下册详细介绍了CSS 3中各种新增样式与属性,其中主要包括CSS 3中的各种选择器、文字与字体、背景与边框、各种盒模型、CSS 3中的布局方式、CSS 3中的变形与动画、CSS 3中与媒体类型相关的一些样式与属性等。立即去当当网订购

关于选择器部分,最后要介绍的一个选择器是通用兄弟元素选择器,它用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。它的使用方法如下所示。

<子元素> ~<子元素之后的同级兄弟元素> {
// 指定样式
}

这里的同级是指子元素和兄弟元素的父元素是同一个元素。

代码清单19-28为一个通用兄弟元素选择器的使用示例,该示例中对所有div元素之后的,与div元素处于同级的p元素指定其背景色为绿色,但是对div元素内部的p元素的背景色不做指定。

代码清单19-28 通用兄弟元素选择器的使用示例

<!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" />
<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元素为div元素的子元素</p>
    <p>p元素为div元素的子元素</p>
</div>
<hr />
<p>p元素为div元素的兄弟元素</p>
<p>p元素为div元素的兄弟元素</p>
<hr />
<p>p元素为div元素的兄弟元素</p>
<hr />
<div>p元素为div元素的子元素</div>
<hr />
<p>p元素为div元素的兄弟元素</p>
</div>
</body>
</html>

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


 

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站