IE7的web标准之道 Ⅱ（2）
作者：阿一 来源：JustinYoung's Blog 发布时间：2008-08-13 12:50:00
相邻同胞选择符
利用“相邻选择符”，可以根据一个元素定位到与之相邻的另一个元素，并应用样式。说白了，“相邻选择符”就是只对“与自己平行关系的”、“相邻的”、“在我下面的”“哥们元素”起作用。下面的例子，将更有助于你的理解（注意只有处于h1后面的p3，字体颜色发生了变化）。
<!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=utf-8" />
<meta name="Keywords" content="简单的XHTML页面" />
<meta name="Description" content="这是一个简单的XHTML页面" />
<title>简单的XHTML页面</title>
<style type="text/css">
h1 + p {color:blue}
</style>
</head>
<body>
<p id="p1">这里是我哥们甲的哥们，“我”和它不太熟。</p>
<p id="p2">这里是我哥们甲，它在我前面面，“混”的比我好，所以我就不管它了。</p>
<h1>这里是“我”</h1>
<p id="p3">这里是我哥们乙，它在我后面，“混”的还不如我，所以我要照顾它一下。</p>
<p id="p4">这里是我哥们乙的哥们，“我”和它不太熟。</p>
</div>
</body>
</html>
下面是分别在IE6，IE7，FireFox（版本2.0.0，12）和Oepra（版本9.25）的显示效果截图（IE6和IE7共存的方法，可以参考文章《IE6和IE7共存方法（别人是别人的，我是我的）》）。
下面是关于“子选择符”和“后代选择符”的一些补充资料
很多朋友把分不清“子选择符”和“后代选择符”的区别。其实它们的差别还是蛮大的。“后代选择符”IE6，甚至更低IE版本，就已经支持了。也许你已经被这些“拗口”、“深奥”的名词搞迷糊了。到底什么“后代选择符”呢？其实大家都用过，看看下面的例子就明白了。 现在无论是FireFox还是IE7，对于“子选择符”的支持还都存在一定的问题。
<!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=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
/*后代选择符*/
#div1 p{
color:red;
}
/*子选择符*/
#div1>p{
font-size:150％;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1">我是div1的儿子1
<p id="p1_1">我是div1的孙子</p>
</p>
<p id="p2">我是div1的儿子2</p>
</div>
</body>
</html>
示例中，"p1"和"p2"包含在“div1”内，那么"p1"和"p2"就是“div1”的儿子，是后代，而“p1_1”包含在“p1”中，那么“p1_1”是“p1”的儿子，是后代。而“p1_1”也包含在“div1”中，则“p1_1”是“div1”的孙子，也是后代。使用“#div1 p{color:red;}”（后代选择器）会将div1下面的所有段落的字体颜色都设置为了红色。无论是孩子还是孙子，都要听话。“只要是我的后代，就得听我的话！”——这就是“后代选择符”。
而“子选择符”则不会那么霸道，它只管它的“儿子”，不会去管“孙子”、“重孙子”、“重重孙子”……
0
投稿猜你喜欢
当列表菜单项目特别多的时候，使用JavaScript手风琴菜单(Accordion Menus)是个不错的选择。手风琴折叠菜单利于组织菜单项- 方法1： 代码如下:truncate table TableName 删除表中的所有的数据的同时，将自动增长清零。 如果有外键参考这个表，这
- 采集开始第一步是分析要采集的页面。使用浏览器打开要采集的页面（如:http://sports.sina.com.cn/k/2008-09-1
- 今早打开 腾讯ISD的博客 ，看到一篇新的文章，《迷你屋视觉规范简介》，赶紧看了来学习。不过给我抓到问题咯，臭鱼不介意我在这说下吧：这套规范
- 佛爷去了公司的年夜饭，我有点无聊就在公司 Coding 点东西玩玩，于是就有了这玩意。请允许我很猥·琐得将这个游戏称之为“是男人坚持 100
- 本章的前面讨论如何使用SQL向一个表中插入数据。但是，如果你需要向一个表中添加许多条记录，使用SQL语句输入数据是很不方便的。幸运的是，My
- 本期薯片会的目的是讨论人物角色在设计中如何应用的问题。围绕了以下几个问题开展了讨论：1、 角色能干什么？2、 包含哪
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- 很多网站都有“浏览历史”这个功能，通常都是显示在页面的一侧，特别是一些购物网站，这个功能会让用户使用网站的体验好一些；例如当当网或淘宝网都有
- DATE_FORMA T(date, format) 根据格式串format 格式化日期或日期和时间值date，返回结果串。可用DATE_F
- 新浪天气预报代码，需要的朋友可以复制下面的代码到要显示的页面，新浪代码 ：<IFRAME WIDTH='260
- 代码如下:'============================== '格式化HTML，SDCMS加强版 '==
- match()方法用于从字符串中查找指定的值本方法类似于indexOf()和lastindexOf()，不同的是它返回的是指定的值，而不是指
- 前一段时间碰到这样的的问题，Ajax从后台得到的中文信息怎么都是空。后来到网上搜资料，大多是以下这样。用AJAX来GET回一个页面时，RES
- asp数字分页涵数参数说明：SQL: 查询语句，PageSizeN: 每页显示多少新闻记录classid: 栏目ID，PageCountS:
- 方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为
- 阅读上一篇：微软建议的ASP性能优化28条守则(4)技巧 13：避免重新确定数组的维数 应尽量避免 Redim 数组。就性能而言，如果计算机
- 突然想到写这个话题，是基于最近在设计产品界面时，年糕一直在给我们灌输设计的品牌概念以及文化内涵要求而产生的，因之前在界面设计中也遇到一些困惑
- 最近有点审美疲劳，以往看起来觉得漂亮的界面现在觉得很一般，以前觉得看来还行的界面现在觉得很丑了。想来是时候休息一下了。唯美觉得上次做的OA登
- 这是网站制作很流行的下拉列表两级连动的代码，也是很多人使用的代码。下面，先来看这段代码：<％dim countset&nbs
