CSS样式表：详细介绍IE7新支持的选择器（3）
作者：w3cpro.cn翻译 来源：蓝色理想 发布时间：2007-10-09 18:24:00
图2使用清楚的样式显示它们怎么展示，First DIV的结构有Paragraph One, Second DIV, and Paragraph Nine组成。Second DIV有三个以上段落和拥有三个以上段落的Third DIV。所有段落的颜色是白色，每个包含两个链接元素。所有DIV黑色边框轻度褐色。
图2
图2: DIVs are black-bordered and paragraphs are colored white for clarity.
这个结构可以进行许多选择符的试验。#p#分页标题#e#
试验
好了，让我们试着更改Second DIV的三四两个段落。如果我们只想使用后代选择符可以像这样div div p {color:red;}；问题是上面的规则影响了Second DIV所有的段落，当然包括Third DIV的所有段落，因为Third div在DIV里面而段落在它里面。 还使用它？后代选择符没有一点选择性，让很多嵌套的元素都被选择当我们宁愿有给小的组选择。
的确，classes提供更好的选择性，但我们正试着避免class-itis。可是，不使用任何class仅使用相邻选择符比较困难。IE7 以前我们使用下面的方法：
div div p {color: red;}
div div div p {color: black;}
div div p.first {color: black;}
第一个规则应用了，然后带有另外DIV选择器的另外一个规则颠倒了Third DIV里的样式。随后阻止Paragraph Two的样式，我们没有选择，只有给段落指定一个class更换样式。真是痛苦！
通过子和兄选择符，我们可以很简单的实现，不需要class。
div>div>p+p {color: red;}
div>div>div p {color: black;}
图3
图3: Our new combinators have selected only Paragraphs Three and Four.
让我们来分析下上面的代码，第一个规则的意思是：选择div的子部div的子部段落的相邻兄弟段落。
Second DIV是第一DIV的子部，Second DIV里面的两个段落即符合直接跟随另外一个段落的要求是Paragraph Two 和 Paragraph Three。Paragraph one没有被选中，因为在Second DIV里面没有兄弟段落在它前面。
0
投稿猜你喜欢
- 字符串转十六进制StrToHex Function<％ Response.Write StrToHex("Nice
- 一。首先，添加如下存储过程CREATE PROCEDURE dbo.ChangeObjectOwner @Ol
分页设计我们经常会见到，这里有30个分页设计，以供大家欣赏欣赏借鉴。- 这带来了很多好处，但是也要求学习一些新的概念、命令、使用和管理任务。所以在投入你的生产系统之前，看看它解决什么、管理什么，以及对它的正反面评
- (注：在看到大家如此关注JS里头的这几个对象，我试着把原文再修改一下，力求能再详细的阐明个中意义 2007-05-21）在提到上述的概念之前
- 瞬间设计是什么？良好的用户体验，全在于那些完美的瞬间。在第一个瞬间，假设当一位用户从购物搜索结果页面跳转到某个店铺的时候，他此刻可能是想看看
- 在mysql安装目录的bin下, 运行mysql --install MYSQL5查看服务中, 会多一个MYSQL5的服务XAMPP的控制面
- 网上有这样一道题目：一个字符串String=“adadfdfseffserfefsefseetsdg”，找出里面出现次数最多的字母和出现的次
- 运行下面的代码你就可以清楚的认识到这两个参数的用法,innerText只能动态的改变指定元素内的文本内容，而innerHTML则不仅仅可以改
- 如何显示已在数据库编码了的相对应的记录？我做了一个歌曲库，在查询中使用了几个下拉菜单供选择条件用，如歌手的性别、区域、爱好等，由于选项太多，
- 在实际的数据库应用中，我们经常遇到这样一个问题，连接到Oracle数据库的用户在作了一次操作后，再也没有后续操作，但却长时间没有和数据库断开
- 如何最准确地统计在线用户数？我们推荐的这个程序据说是目前最好的在线用户数量统计程序。代码如下：'首先要设置好global.asa&n
- 今天在GOOGLE上查图片资料，这一幕真让我纠结啊：使用【向前】【向后】这种说法，就默认了有一个对比坐标，那就是当前显示的4张缩略图。点击【
- 在jQuery的官方文档中，提示用户这是一个低级的方法，应该用.data()方法来代替。$.data( element, key, valu
- MySQL 客户端连接成功后，通过 show ［session|global］status 命令 可以提供服务器状态信息，也可以在操作系统上
- 这个程序将记数器的数字放在ACCESS数据库中,当然你也能用你希望其它的ODBC数据源.这个程序从URL中读取记数信息.如下:< IM
- 由于javascript无法获取img文件头数据，必须等待其加载完毕后才能获取真实的大小，所以lightbox类效果为了让图片居中显示，导致
- 关于跨域这个话题，很早就答应过要分享，但是因为懒，一直拖着，直到D2上有人谈起了“完美跨域”。“跨域”应该已经算不上什么难题了，只是提起“完
- 不知道用ASP写代码的朋友是不是和我有一样的感受，ASP中最头疼的就是调试程序的时候不方便，我想可能很多朋友都会用这样的方法&ldq
- 嘀咕嘀咕： 每次写文章往往开头是最难的，总想给UED读者不同的sense。就像我们设计产品总是想迎合我们的用户，最后觉得好似跟在用户后面狂奔
