2008-06-07

eclipse.ini说明

昨天晚上本想配一个vim的C＋＋开发环境，但对vim、C＋＋、Linux还不熟，不想因为这个耽误了真正编程技能的学习。于是就弄了个eclipse+cdt，很快就弄好了，但是在使用过程中eclipse却老挂掉，总是java.lang.OutOfMemoryError: PermGen space。我的－Xmx768也还是不行。后来google了一下，在eclipse.ini中加了
-XX:PermSize=64M
-XX:MaxPermSize=128M
eclipse就老老实实地呆在那里不挂了。先用这个环境吧，Linux和vim是肯定要会的，慢慢用吧，久了就熟了。

【转】eclipse.ini说明

-vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M
这里有几个问题：
1. 各个参数的含义什么？
2. 为什么有的机器我将-Xmx和-XX:MaxPermSize都设置为512M之后Eclipse可以启动，而有些机器无法启动？
3. 为何将上面的参数写入到eclipse.ini文件Eclipse没有执行对应的设置？

下面我们一一进行回答
1. 各个参数的含义什么？
参数中-vmargs的意思是设置JVM参数，所以后面的其实都是JVM的参数了，我们首先了解一下JVM内存管理的机制，然后再解释每个参数代表的含义。

堆(Heap)和非堆(Non-heap)内存
按照官方的说法：“Java 虚拟机具有一个堆，堆是运行时数据区域，所有类实例和数组的内存均从此处分配。堆是在 Java 虚拟机启动时创建的。”“在JVM中堆之外的内存称为非堆内存(Non-heap memory)”。可以看出JVM主要管理两种类型的内存：堆和非堆。简单来说堆就是Java代码可及的内存，是留给开发人员使用的；非堆就是JVM留给自己用的，所以方法区、JVM内部处理或优化所需的内存(如JIT编译后的代码缓存)、每个类结构(如运行时常数池、字段和方法数据)以及方法和构造方法的代码都在非堆内存中。
堆内存分配
JVM初始分配的内存由-Xms指定，默认是物理内存的1/64；JVM最大分配的内存由-Xmx 指定，默认是物理内存的1/4。默认空余堆内存小于40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到- Xms的最小限制。因此服务器一般设置-Xms、-Xmx相等以避免在每次GC 后调整堆的大小。
非堆内存分配
JVM使用-XX:PermSize设置非堆内存初始值，默认是物理内存的1/64；由XX:MaxPermSize设置最大非堆内存的大小，默认是物理内存的1/4。
JVM内存限制(最大值)
首先JVM内存限制于实际的最大物理内存(废话！呵呵)，假设物理内存无限大的话，JVM内存的最大值跟操作系统有很大的关系。简单的说就32位处理器虽然可控内存空间有4GB,但是具体的操作系统会给一个限制，这个限制一般是2GB-3GB（一般来说Windows系统下为1.5G-2G，Linux系统下为2G-3G），而64bit以上的处理器就不会有限制了。
2. 为什么有的机器我将-Xmx和-XX:MaxPermSize都设置为512M之后Eclipse可以启动，而有些机器无法启动？

通过上面对JVM内存管理的介绍我们已经了解到JVM内存包含两种：堆内存和非堆内存，另外JVM最大内存首先取决于实际的物理内存和操作系统。所以说设置VM参数导致程序无法启动主要有以下几种原因：
1) 参数中-Xms的值大于-Xmx，或者-XX:PermSize的值大于-XX:MaxPermSize；
2) -Xmx的值和-XX:MaxPermSize的总和超过了JVM内存的最大限制，比如当前操作系统最大内存限制，或者实际的物理内存等等。说到实际物理内存这里需要说明一点的是，如果你的内存是1024MB，但实际系统中用到的并不可能是1024MB，因为有一部分被硬件占用了。
3. 为何将上面的参数写入到eclipse.ini文件Eclipse没有执行对应的设置？

那为什么同样的参数在快捷方式或者命令行中有效而在eclipse.ini文件中是无效的呢？这是因为我们没有遵守eclipse.ini文件的设置规则：
参数形如“项 值”这种形式，中间有空格的需要换行书写，如果值中有空格的需要用双引号包括起来。比如我们使用-vm C:\Java\jre1.6.0\bin\javaw.exe参数设置虚拟机，在eclipse.ini文件中要写成这样：

-vm
C:\Java\jre1.6.0\bin\javaw.exe

按照上面所说的，最后参数在eclipse.ini中可以写成这个样子：

-vmargs
-Xms128M
-Xmx512M
-XX:PermSize=64M
-XX:MaxPermSize=128M
实际运行的结果可以通过Eclipse中“Help”-“About Eclipse SDK”窗口里面的“Configuration Details”按钮进行查看。

另外需要说明的是，Eclipse压缩包中自带的eclipse.ini文件内容是这样的：

-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
-vmargs
-Xms40m
-Xmx256m
其中–launcher.XXMaxPermSize（注意最前面是两个连接线）跟-XX:MaxPermSize参数的含义基本是一样的，我觉得唯一的区别就是前者是eclipse.exe启动的时候设置的参数，而后者是eclipse所使用的JVM中的参数。其实二者设置一个就可以了，所以这里可以把 –launcher.XXMaxPermSize和下一行使用#注释掉。

3. 其他的启动参数。 如果你有一个双核的CPU，也许可以尝试这个参数:
-XX:+UseParallelGC

让GC可以更快的执行。（只是JDK 5里对GC新增加的参数）
1 留言
标签：

为Java应用程序的开发而配置vi

大多数的软件开发人员都会在其生涯的某个时候碰到vi编辑器——如果不是在大学里的话，那就是在实际使用的UNIX机器上，将自己的Windows桌面机器里所编码东西安装到完全成熟的集成开发环境（IDE）里的时候。很少能够碰到长期从事微软系统开发的开发人员不会在一个月至少使用vi一次。有些开发人员很喜爱vi，而其他的则很厌恶它。但是对于一个Java的开发人员来说，要想让vi成为一个更好的开发环境将会有很多的工作需要完成。

很多人都预料Java和vi并不总是能够共同工作。因为vi是小型功利主义的同义词，而Java则像是一头笨拙的大型动物。选择将vi作为其主要工作环境 的Java开发人员可能是比较罕见的，但是即使是偶尔使用vi的用户，也能够从花上一点时间将它配置一下，使之与Java更加友好上获益。你可能会很震惊 的看到，当所有提到的工作都做到位之后，vi能够为你的IDE提供多少特性。

让我们开始吧

首先，要确信你的vi命令已经连接到了vim库，至少要象征性地连接到了或者替代了（aliased）。Vim的意思是Vi Improved，它几乎已经在vi及其衍生产品中占据了的主导地位。它速度快，易维护，特性丰富，而且几乎在每个平台上都有。

一旦你安装好了vim，就要在你的主目录下创建一个叫做.vimrc的文件。Listing A显示了一个很好的.vimrc起始文件。这个文件里的几个命令行告诉vi要给Java的源代码涂上颜色，使其更易于阅读。其结果并不十分重要，而且如果 你不喜欢显示出来的颜色，你可以放心地取消它们。

对标签跳跃的支持
标签是Java的标识符，它们可以是包装名、类名、方法名，或者是字段名。在你的代码里创建一个所有标签的大型索引，能够让你使用单个按键就跳跃到任何类、方法或者字段的定义上。这些索引文件都是使用ctags程序创建的，后者在vim的发行版里都有。

Ctags会获取Java源文件或者包含有Java源代码的目录的列表，从中提取标识符的信息，再生成所vi需要的用于跳跃到标签的排序索引。下面一行代 码是ctags调用的一个例子，只要JAVA_HOME变量被正确地定义，它会生成一个包含有项目源代码里所有标识符的标签文件，Sun核心库源代码也是 如此：

ctags -f ~/.tags -R ~/myprojects/src $JAVA_HOME/src

一旦标签索引创建好了，你所需要做的只是告诉vi要在哪里找到它。这一步是通过将set tags=~/.tags添加到你的~/.vimrc文件里实现的。有了可用的标签索引文件，而且vi也知道了要到哪里去找到它，你现在就可以通过按 [CTRL] ]来跳跃到任何标识符上了。尽管这对于跳跃到你已经定义的方法、类和你自己编写的字段上很有用，但是如果你将Java核心类库加到你的标签索引里将会更加 有用。现在，只用简单地对任何核心类库的类或者方法按[Ctrl] ]，你就会跳跃到它完全使用javadoc所编写成的定义。.

标签名的填充
虽然跳跃到类、方法和字段定义所在的位置对于查看其javadoc以及检查其内容是有很用处的，但是更常见的情况是，你只是需要检查一个关键字的定义。在 大多数IDE里，这一点是通过输入关键字完成的。但是，如果你已经将你的标签文件像前面一部分所讲的那样设置了，那么在vi里填入关键字就只是一个导向性 的配置了。

将set complete=.,w,b,u,t,I这一行放到你的~/.vimrc文件里，能够让你在插入模式下通过按[Ctrl]N自动地将任何类、方法或者字 段名填满。连续按[Ctrl]N将移动到下一个相匹配的地方。当你看到你想要找的标签时，只用继续输入你源代码剩下的部分就行了。你可以在vim的Web网站上找到其他关于标签名填充的提示，包括使用Tab键来进行填充。

方法的折叠
好的实践经验告诉我们：你应该保持类的短小和简单，因为程序复杂性表现在类的层次性上，而不是500行的方法上。不幸的是，有些类已经脱离了控制，变得事实上无法移动操作了。

IDE常常会在左边一个狭窄的框体提供一个列出了内容里方法的表格，以此来减轻开发人员查看冗长源代码的困难。与之相对的是，vi提供了一种它叫做“方法 折叠（method folding）”的可折叠程序块。折叠允许你隐藏被缩排过的（indented）代码块开头和结尾之间的所有代码。要激活折叠，就要把set foldmethod=indent加到你的~/vimrc里。

一旦方法的折叠被激活，你就可以使用:set foldlevel=0来极大地精简一个Java的源文件。如果将折叠的层数设置为零，那么你就是在告诉vi只显示完全没有被缩排的命令行，而后者在大多 数Java源文件里代表着包装、导入，以及类或者接口的定义行。设置foldlevel=1就是告诉vi说：除了没有被缩排的命令行，只缩排过一次的命令 行也应该被显示，它们包括方法的签名以及其他一些不多的内容。要打开一个折叠夹并查看某个方法所隐藏的内容，你就要在被折叠的命令行上输入zO。

通过设置foldlevel就能够很轻易地开启或者取消方法的折叠。我喜欢在调试的时候使用它，但是不喜欢在编写新代码的时候使用它。你要自己来决定它应该如何去适应你的工作方式。
IDE不仅仅只是用于编辑；它们还是编译环境。Vi在不需要使用外部编译器和剖析结果信息上的工作做得非常好。现在很多Java的项目都将易于编写脚本的 Ant作为一个创建环境。我没有向.vimrc文件里加载很多Ant专用的设置，而是单独创建了一个做作vimAnt脚本，见Listing B。

这个脚本调用了一个带有几个参数的Ant可执行文件，然后对输出进行过滤，让其只包含编译器输出。你现在几乎就准备好从vi里调用Ant了。你只需要将 Listing C里的命令行加到你的~/.vimrc文件里。这些命令行告诉vi要调用你所创建的vimAnt脚本，并提示它如何剖析Ant的jikes输出。

在你的系统路径下有了vimAnt脚本之后，你现在就可以使用:make命令来初始化编译了。当前目录及其所有的父目录都会被搜索，以寻找一个build.XML文件，这个文件的类对象会被调用。错误输出会被vi自动地剖析。

一旦你在vi里进行了带有错误的编译，你就可以使用快速修复（quick fix）模式来迅速地到达错误地点，进行及时的修补。:cn命令会把你带到下一个出错地点，而不考虑它在什么文件里。:cc命令会向你显示当前错误的编译 器输出信息；而:cl会生成一个列有项目所有错误的列表，以供浏览这些错误。修补好你的错误，你就离成功的编译只有一:make之遥了。
0 留言
标签：

【鲜为人知】清朝海军方美

一年出访八个国家　化解拉美排华暴乱 清朝海军赴美搞军舰外交
清朝“镇海之宝”远航欧美，访问途中官兵集体剪辫
9月11日(2006年），中国海军舰艇编队从美国夏威夷出发，继续横跨太平洋的行程。由于舰队还将访问美国本土，这次航行备受人们关注。而在整整95年前，孤独的中国巡洋舰“海圻”号也曾跨越三大洋，进出８国14港，创造了旧中国海军空前绝后的一次“军舰外交”旅程。
自1895 年甲午海战惨败后，在张之洞、刘坤一等有识之士的努力下，清朝开始了缓慢而艰难的重建海军之路。清政府先后从英德等国买回43艘军舰，但因囊中羞涩，只有 从英国订造的“海圻”号巡洋舰够大够先进。这艘号称“天字一号艨艟”的军舰上有两门8英寸炮，是当时中国海军的“镇海之宝”。尽管兵微将寡，但朝廷里的达 官显贵们却迫不及待地拿海军作为外交使节，发挥“移动国土”的作用。
1910年英王爱德华七世逝世，其子乔治五世继承王位，定于1911 年6月22日举行加冕庆典，并邀请包括中国在内的18国200余艘军舰参加庆祝仪式。于是清政府决定派专使亲王载振前往祝贺，并下令海军部“加派巡洋舰队 统领程璧光率领海圻巡洋舰前往，顺访美利坚诸国”。其规格之高，兴办之隆，在清朝260多年外交史上是绝无仅有的特例。






1911 年4月21日，“海圻”号载着300多名大清海军精英，从上海起航，经台湾海峡、南中国海驶出国门，穿过印度洋、红海、地中海，经直布罗陀海峡进入大西 洋。在史无前例的万里远航中，统领程璧光做出惊人举动：他在后甲板集合全舰水兵，发表训令：“长发污衣藏垢，既不卫生，又有碍动作，尤以误害海军军人为 甚，故实无保留之价值。”他下令本舰士兵一律剪掉拖在脑后的发辫，以符合世界潮流，此举获得士兵的一致拥护，但也有一些老兵舍不得长长的发辫，便用红布包 裹，寄回家乡。　
中国军舰在英参加阅舰式，清朝使者陪英王进行检阅
6月20日，“海圻”号驶抵英国朴次茅斯军港。候阅期间，英国皇家海军为增进各国海军交流，在6月22日举行万国海军田径运动会，不晓得田径为何 物的“海圻”号水兵也派出数十名体格健壮者组队参赛。在这场有数万市民观战的比赛中，“海圻”号代表队虽与奖牌无缘，但无一人犯规，无一人中途退场，尤其 是在200米跨栏比赛中，信号兵孟广吉在连跨两栏后被绊倒，“仆地裂肤，流血满胫，仍奋勇到达终点，在场观者掌声如潮”。为此“海圻”号代表队获得大会主 席的表扬。　
6 月24日上午11时许，乔治五世国王偕玛丽王后在海军大臣丘吉尔的陪同下检阅各国舰队，中国专使载振和程璧光应邀陪英王乘坐同一艘游艇观舰。当英王乘艇接 近检阅区时，80艘各型战舰分8行威武阵列，全部旗帜高悬，舰上官兵昂首在甲板列队。隆重壮观的观舰式持续了1小时20分钟，回港途中，乔治五世接见了中 国海军统领程璧光，并向其颁赠“加冕银牌”。观舰式结束后，“海圻”号也趁机回了趟“娘家”――位于纽卡斯尔的阿姆斯特朗造船厂，进行为期一个月的维修。




美女演员狂吻中国将军，中国军舰赴古巴化解排华暴乱
由于1908年美国“大白舰队”周游世界、途经厦门时备受中国海军优待，美国海军部多次邀请中国海军回访，于是“海圻”号在英国完成大修后，便向美国东海岸进发。经过两周连续航行，8月10日，“海圻”号抵达纽约。
中国军舰首次访美，在全美上下引起强烈反响。已故美国总统格兰特之子、纽约区陆军最高司令官小格兰特将军派夫人陪同“海圻”号官兵拜谒格兰特总统 陵墓。还有一些美国商人出于个人目的，也向程璧光大献殷勤。美国铁路公司总干事以游览尼亚加拉大瀑布为幌子，将中国客人拉到伯利恒钢厂参观。纽约造船厂老 板罗伊泽认定程璧光必将成为未来中国海军的“掌门人”，便送给程璧光一只名贵的波斯猫，称这只猫能在关键时刻帮程璧光“做出正确的抉择”，目的是想讨好程 璧光，争夺中国军舰订单。
抵美第四天，程璧光等前往波士顿，会见正在别墅休假的塔夫脱总统，并应邀观看了在美国轰动一时的话剧《红寡妇》。坐在贵宾包厢里，程璧光在英文 翻译的讲解下看得有滋有味。颇会来事的新任副官刘永浩试探美方联络官：“演出结束后，不知能否安排统领到后台参观？”美方联络官心领神会，立即耳语侍者办 理。等到剧终，程璧光刚刚起身，剧院经理便笑容可掬地站在包厢门口，恭请他驾临后台指教。此时，全体演职员以饰演红寡妇的女主角打头，鼓掌欢迎中国海军将 军。程璧光见状大悦，即席致词，对演职人员的精彩表演给予高度赞扬。剧院经理兴奋地鼓动道：“女士们，让我们来认识一下这位海军将军吧！”还没有等程璧光 明白是什么意思，霎时数十名浓妆艳抹的美女紧紧围住程璧光，一番狂吻让堂堂一舰之长变成“大花脸”。事后，谨守“男女授受不亲”原则的程大人一再“责怪” 刘副官：“都是你惹的麻烦！”　
“海圻”号停泊纽约期间，恰逢拉美一些国家发生排华暴乱，“海圻”号奉命顺访古巴、墨西哥，以宣慰侨胞。8月中旬，“海圻”号驶抵古巴首都哈瓦 那，立刻受到古巴华侨的热烈欢迎。更令官兵们感动的是，每当离舰登岸，一遇侨胞，无论男女老少，都竞相请至家中，盛情招待，临别还赠送各种纪念品。舰队的 到访也让古巴政府对华侨的态度产生了变化，古巴总统接见程璧光时特意表示：“古巴军民决不会歧视华侨。”
“海圻”号在古巴停泊10天后，原计划继续访问墨西哥，但因墨西哥政府已就排华事件正式向清政府赔礼道歉，偿付受害侨民生命财产损失，“海圻”号于是取消了访问计划。





万里远航耗时一年，回国途中参加辛亥革命
本来，“海圻”号回国计划从巴拿马运河进入太平洋，这样不仅能完成中国海军第一次环球航行，而且航程也比沿原航线回国整整缩短三分之一。但考虑到“海圻”号的存煤量有限，单舰横跨广袤的太平洋存在一定风险，最终还是决定原路返航。　
1911 年9月初，“海圻”号从哈瓦那解缆起航，当到达英国巴罗港时，全舰官兵得知一场开天辟地的辛亥革命在中华大地爆发，顿时群情激昂。三副黄仲煊在舰上展开地 下活动，争取程璧光同意领导全舰官兵在海外易帜，加入革命阵营，扩大国际影响。程璧光为此专门集合全舰官兵在甲板训话，他开门见山地说：“你们任何人如欲 回国参加革命工作，请站到右舷，不赞成的站到左舷。待我数完‘一、二、三’，就请各位按自己的意愿，决定行动。”言毕，程璧光略微停顿几分钟，接着高声喊 出“一、二、三”。只见列队甲板左舷的官兵全部移至右舷，就连纽约造船厂老板罗伊泽所赠的那只波斯猫也不例外。一时间，全舰掌声雷动，官兵们欢呼雀跃。　
1912年5月，升起中华民国国旗的“海圻”号终于回到上海，完成了这次传奇航行
1 留言
标签：

2008-06-06

细说CSS样式选择符（三）

英文原文：http://www.456bereastreet.com/archive/200510/css_21_selectors_part_3/
中文原文：http://www.dudo.org/article.asp?id=195
这本文的第三部分，也是最后一部分。在第一部分中我们介绍了类型选择符、类选择符、id选择符、通配选择符和简单选择符的基础知识。第二部分中我们介绍了选择器、混合选择符、分组和属性选择符等。

这部分我们将着重研究伪类和伪元素。和第二部分中介绍的高级选择符一样，伪类和伪元素并没有得到所有主流浏览器的完全支持，因此一定要留意在缺乏浏览器支持时可能发生的情况。你一定不想让你网页的内容在不支持这些选择符的浏览器中变得无法让人阅读。

伪类和伪元素
伪类和伪元素通过文档中并没有声明的信息来选取元素的。例如，并没有元素代表段落中的第一行或者元素内文本的第一个字母。

伪类
伪类通过元素的特征而不是元素的名称、属性、内容来匹配元素的。
:FIRST-CHILD
它匹配作为父元素中第一个字元素的元素。假如你想为文章中的第一段设定一个特殊的样式，再假设文章被包含在一个class为article的div中，那么下面这段代码将会匹配每篇文章中的第一个p元素：
  1. div.article p:first-child {
  2. font-style:italic;
  3. }
要匹配所有元素中的第一个p元素，可以采用下面的规则：
  1. p:first-child {
  2. font-style:italic;
  3. }
:LINK 和 :VISITED
linke伪类作用于访问过和未访问过的链接。这两种状态是相互排斥的：也就是说一个链接不可能同时既是访问过的又是未访问过的。
这些伪类只能应用于根据文档采用的语言类型定义的超级链接上。对于HTML来说，就是拥有href属性的元素。由于它们不会在其它元素上生效，因为下面的选择符写法是一样的：
  1. a:link
  2. :link
:HOVER，:ACTIVE和:FOCUS
动态伪类可以根据用户的选定动作的控制选定元素的表现等式。
:hover应用于当用户鼠标指针指向一个元素但并没有激活它时。最常见的就是用鼠标把指针移动到元素上方时。
:active应用于当元素被用户激活时。对于鼠标用户来说就是当鼠标被保持按下时状态，直到你松开前。
:focus应用于当元素获得焦点时，例如，用键盘输入信息时。

一个元素可以同时使用几个伪类。例如，下面的例子中一个元素同时有focus和hover两个状态：
  1. input[type=text]:focus{
  2. color:#000;
  3. background:#ffe;
  4. }
  5. input[type=text]:focus:hover{
  6. background:#fff;
  7. }
第一第规则应用于当元素获得焦点时，第二第规则应用于被激活时的同一个元素。

:lang
语言伪类可以用于格式化内容指定了特定语言（人类可读语言，非标记语言）的元素。下面这条规则应于指定了瑞典语的引用元素：
  1. q:lang(sv) { quotes:"\201D" "\201D" "\2019" "\2019"; }
文档或元素中语言类型通常是通过HTML中的lang属性或者XHTML中xml:lang属性定义的。

伪元素
伪元素允许作者指定并修改文档树结构中没有声明的节点的样式。
:FIRST-LINE
:first-line伪元素作用于段落中文本的第一行。它只能用于块级元素、inline-block、表头（table-caption）或者表格内框（table-cell）。
显然，第一行的长度取决于很多因素，比如字体的大小、包含文本的元素的宽度等。
下面这条规则将会应用到段落中文本的第一行：
  1. p:first-line {
  2. font-weight:bold;
  3. color:#600;
  4. }
注意：伪元素:first-line中可能使用的属性是有限制的，具体参看《:first-line伪元素》中的说明。

:FIRST-LETTER
这个伪元素指向的是块级元素，列表、表格内框（table-cell）、表头（table-caption）、inline-block元素中的第一个字母或者数字。

下面的规则将应用到class为preamble元素中的第一个字符：
  1. .preamble:first-letter {
  2. font-size:1.5ed;
  3. font-weight:bold;
  4. }
和:first-line一样，:first-letter的中可以使用的属性也同样有一定的限制。请参照[url=http://www.w3.org/TR/CSS21/selector.html#first-letter]《:first-letter伪元素》。

:BEFORE和:AFTER
更多关于CSS特征的讨论都是围绕这两个伪元素展开的，:before和:after伪元素可能用于在指定元素前或后插入扩展内容。
下面是一个使用:before的例子（引自文章《用高级CSS功能制作边框》）
  1. .cbb:before{
  2. content:"";
  3. display:block;
  4. height:17px;
  5. width:18px;
  6. background:url(top.png) no-repeat 0 0;
  7. margin:0 0 0 -18px;
  8. }
使用:after在链接的文本后面插入一个URL：
  1. a:link:after {
  2. content:" (" attr(href) ") ";
  3. }
Internet Explorer中的问题
在你开始使用所学的关于CSS选择符的知识前，到目前为止包括6.0在内Internet Explorer对CSS2.1选择符的支持并不完整。下面是IE不支持或者支持上存在问题的地方：
    子选择符
    相邻兄弟选择符
    属性选择符
    多类选择符
    :first-childe伪类
    语言伪类
    :before和:after伪类
    伪类:hover只在a元素中起作用
    不支持伪类:focus。对于a元素获得焦点时使用:active
幸运的是，在Internet Explorer 7中CSS2.1中规定的选择符都得到了支持。

马上开始使用
本文到此全部结束。现在你已经学会CSS2.1中所有的选择符了。仔细地运用他们，使你的文档保持简洁，增加可用性和要访问性。一定要牢记考虑老式浏览器和不支持高级选择器中浏览器的种种状况。
0 留言
标签：

细说CSS样式选择符（二）

英文原文：http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/
中文翻译：http://www.dudo.org/article.asp?id=194
本文是关于CSS2.1选择符系列文章的第二部分。第一部分主要是讲关于类型选择符、类class选择符、id选择符、通配选择符和简单选择符的基础知识。
而在本部分中，我们主要讲一下选择符的高级应用，这不仅仅包括已经在主流浏览器中得到广泛支持的那些选择符。现在，浏览器对选择符的支持越来越完善，因此完全有必要拿出点时间来了解一下本文所介绍的所有选择符。

选择器
选择器用于将组成混合选择符的多个简单选择符分隔开来。CSS2.1中定义的选择器包括空格（任何数目的tab制表位、空格、具有空格性质的其他字符），大于号“>”和加号“+”。在现在的章节中我们将一一介绍这些选择器的使用。

后代选择符
后代选择符由两个或者多个简单选择符通过空格分隔而组成。他匹配第一个简单选择符对应元素的所有后代元素。例如，下面这条规则将会应用到是div后代的p元素上去：
  1. div p { color:#f00; }
任何形式的简单选择符都可以是后代选择符的组成部分。下面的例子中CSS规则将会应用到id是myid的div中的、li元素下的、类名为info的p元素中：
  1. div#myid li p.info { color:#f00; }
后代选择符可以使我们在不用指定id或者class的情况下选取目标元素，这有助于使文档中的标记更加简洁。假设我们有一个如下结构的导航菜单：

  2. <ul id="nav">
  3. <li><a href="#">Link 1a>li>
  4. <li><a href="#">Link 2a>li>
  5. <li><a href="#">Link 3a>li>
  6. ul>

要选取导航栏中的列表元素和超级链接，我们可以使用下面的CSS规则：

  2. #nav li { display:inline; }
  3. #nav a { font-weight:bold; }

上面的规则不会应用到文档中的所有列表元素和链接中去。和一一给它们指定一个class相比，使用后代选择符会使你的文档清洁不少。

子选择符
子选择符用于择取指定元素的直接后代。子选择符由两个或者多个选择符通过大于号“>”分隔而成。父元素在“>”的左侧，在选择器“>”的两侧允许有空白存在。

下面的规则将会就用到所有div的子元素strong中去：
  1. div > strong { color:#f00; }
只有是div直接后代的strong元素才是这条规则的目标元素。如果文档中在div和strong元素中间有其他元素的话，这条规则就是无效的。下面的例子中只有“Text one”样式受上面规则的影响：

  2. <div>
  3. <strong>Text onestrong>
  4. <p><strong>Text twostrong>p>
  5. div>

相邻的兄弟选择符
相邻的兄弟选择符由两个或者多个简单选择符通过加号“+”分隔而组成。加号两侧允许有空白存在。它匹配第一个元素的下一个兄弟元素，这两个元素必须具有相同的父元素，并且第一个元素和第二个元素在其前与其紧密相邻：
  1. p + p { color:#f00 }
如果把上面这条规则应用到下面的例子中，那么“Paragraph two”样式受影响：

  2. <div>
  3. <p>Paragraph onep>
  4. <p>Paragraph twop>
  5. div>

分组
之所以在这里讲分组，是因为我发现在学习分组混合选择符的时候经常会有人出错。
如果利用几个不同的选择符对不同元素应用相同的样式时，就可以使用逗号“,”把它们分组而不用为每个选择符重复同样的规则了。这里最容易出现的错误就是选择符的不完整。假设我们有下面这么一段代码：

  2. <div id="news">
  3. <h3>Newsh3>
  4. <ul>
  5. <li>Item 1li>
  6. <li>Item 2li>
  7. ul>
  8. div>

假设我们要给只有在id为news的div下的三级标题和列表元素应用相同的规则，那么下面这种写法就是错误的

  2. div#news h3, ul {
  3. margin:0 2em;
  4. }

它会影响到div#news下的h3和ul元素，但是问题就在于它同样会影响到文档中所有ul元素，而不仅仅是div#news下的ul元素。

下面这种写法才是正确的分组选择符的写法：

  2. div#news h3,
  3. div#news ul {
  4. margin:0, 2em;
  5. }

因此，在使用分组选择符时，一定要记住选择符书写完整。

属性选择符
属性选择符根据属性名称或者属性值来匹配元素。属性选择符有四种匹配模式：
[att]
匹配所有拥有att属性的元素，与属性值无关
[att=val]
匹配所有拥有att属性且属性值为val的元素
[att=~val]
匹配所有拥有att属性的元素且val是其属性值由空白分隔开的一个完整单词。在这各情况下val中间没有空白。
[att|=val]
匹配所有拥有att属性的元素，并且att的属性值是由连字符组成，val处于连字符的开始。它主要用于通过lang属性指定特定语言的情况中，例如：“en”、“en-us”，“en-gb”等等。

下面是一些例子。
匹配有title属性的p元素而不管它的值是多少：
  1. p[title] { color:red; }
下面的例子将匹配class属性等于error的div元素
  1. div[class=error] { color:#f00; }
要匹配headers属性中含有“col1”的td元素则可以使用下面的规则：
  1. td[headers~=col1] {color:#f00}
最后，下面的这条规则就匹配lang属性值中连字符前半部分以“eu”开始的p元素：
  1. p[lang|=en] { color:#f00' }
在同一个选择符中多个属性选择符可以同时使用。这样我们就可以用多个不同的属性值来区分相同的元素了。下面这个例子将会匹配到属性class值为quote且有cite属性（不管值是多少）的blockquote元素：
  1. blocquote[class=quote][cite] { color:#f00; }
待续……

这一部分就是这些内容了。在最后的第三部分中，我主要想讲一下伪类和伪元素选择符。到这里你可以先回顾一下第一部分中的内容，重复是学习的好方法：）。
0 留言
标签：

细说CSS样式选择符（一）

注：此帖为转贴，原文地址：http://www.dudo.org/article.asp?id=193

英文原文：http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/
中文翻译：http://www.dudo.org/article.asp?id=193

当你学习CSS时，要学的第一个东西就是选择符（selector）。显然，选择符是CSS中最基础的部分，但是却很少有开发者能将他们物尽其用。当你使用type、ID、class等选择符来完成你的作品时，你可能还不知道除此之外还有很多很多关于它的东西要学。
熟练掌握CSS2.1中所有可用的选择符可以使我们的HTML文档更加简洁明了。可以使你最少量地使用class属性，尽量避免多余的div和span标签出现等。怎么样，听起来还不错吧？
那 么为什么并不是所有的选择符都被得到广泛地应用呢？其中一个很重要的原因就是包括Internet Exlorer 6.0在内的所有IE版本对CSS2.1支持的缺陷造成的。然而几乎所有的现代浏览器都在最大程度上支持CSS2.1中规定的选择符。在我们开始一切工作 之前我们必须意识到这些差别。
令人欣慰的是，在IE7.0对选择符的支持得到了很大程度的提高。得知这个消息后，在未来的设计中你就可以放心大胆地使用它们了，因此也有必要全面了解和掌握所有规定的选择符了（本文发表时IE7.0还在开发中 dudo注）。
由于CSS2.1中规定的选择符有很多，因此在一篇文章中想把他们解释的很清楚可能会需要很长很长的篇幅来写，所以我将从下面三个部分来分开讲解，以期这些知识简单易接受。

1、本文第一部分，讲解包括通配符、类型选择符、id、class在内的基本的选择符；
2、第二部分主要讲选择器（combinators）、联合选择符（grouping）、分组和属性选择符
3、第三部分主要讲解伪类和伪元素（pseudo-classes and pseudo-elements）
好，我们开始第一部分的讲解。

选择符基础
首先是一个最基本的知识点：CSS选择符是与文档树结构中元素匹配的一种模式。当模式中的匹配结果返回true时，CSS中声明的样式才会应用到相匹配的元素中去。以下面这个简单的CSS语句为例来说：
  1. p { color:#f00; }
选择符CSS语句中大括号“{”前面的部分。这里的选择符就是p，它将匹配文档中所有的p元素并把p元素内的文本设置为红色。这个例子很基础。

选择符概述
好，看过上面简单的例子之后，我们介绍一下其它一些选择符，现在开始已经慢慢地深入了。在开始介绍之前，还是选看一下CSS2.1所有选择符的结构吧。

CSS2.1选择符结构

  2. 选择符类型 模式 说明
  3. 通配选择符 * 匹配所有元素
  4. 类型选择符 E 匹配所有E元素
  5. 类（Class） .info 匹配所有属性class值等于info的元素
  6. ID #footer 匹配所有属性id值等于footer的元素
  7. 后代选择符 E F 匹配所有为E后代的F元素
  8. 子选择符 E > F 匹配所有为E子元素F
  9. 邻近选择符 E + F 匹配所有E的兄弟元素F
  10. 属性选择符 E[att] 匹配所有拥有att属性的E元素，与属性值无关
  11. 属性选择符 E[att=val] 匹配所有拥有att属性且值为val的E元素
  12. 属性选择符 E[att~=val] 匹配所有拥有att属性且val为属性值中一个完整单词的E元素
  13. 属性选择符 E[att|=val] 匹配拥有拥有att属性且val是其值的开始
  14. :first-child伪类 E:first-child 匹配所有处于其父元素中的第一个节点E元素
  15. 链接伪类 E:link 匹配所有未访问过的链接
  16. E:visited 匹配所有已经访问过的链接
  17. 动态伪类 E:active 匹配所有激活状态中的链接
  18. E:hover 匹配鼠标经过时的链接
  19. E:focus 匹配处于焦点状态的链接
  20. :language伪类 E:lang(c) 匹配所以语言为c的E元素
  21. :first-line伪类 E:first-line 匹配元素E中内容的第一行
  22. :first-letter伪类 E:first-letter 匹配E元素中的首字母
  23. :before 和 :after E:before 匹配在E元素前（后）插入的内容
  24. 伪类 E:after
下面我将在后面的两部分中更加详细地解释这些选择符，请继续往下看。上表中用到了一些术语，下面我简单解释一下：
后代：
在文档树结构中一个元素的子元素，子元素的子元素，直到这个元素的最底层为止。
祖先：
在文档树结构中一个元素的父元素，父元素的父元素，甚至更上一层的元素
子元素
是指在文档树结构中一个元素的直接后代，他们之间再也没有任何其他元素出现
父元素
是指在文档树结构中一个元素的直接祖先，他们之间再也没有其他任何元素出现
兄弟元素
是指和当前元素拥有同一父元素的元素

简单选择符 和 混合选择符
选择符中有两个基本的类型：简单选择符和混合选择符。
简单选择符由一个类型选择符或者通配符加上零个或者多个属性选择符，ID选择符，伪类选择符构成。下面的语句就是一个简单选择符的例子：
  1. p.info { background:#ff0 }
混合选择符由两个或者多个简单选择符通过连接符组成。下面是一个非常简单的混合选择符。
  1. div p { font-weight:bold; }
上面这条规则将会应用到所有div内的元素p上
选择符有时可能会使用伪类。在混合选择符中，伪类只能出现在最后一个简单选择符后面。

通配选择符
通配选择符用一个星号“*”来表示，它匹配文档中的所有元素。在样式表中一般很少见，但是它有时候会配合class和ID选择符一起使用。如果简单选择符中不仅仅含有通配选择符，那么“*”可以省略不写。
.myclass就等同于 *.myclass
#myid 等同于 *#myid
通配选择符的一个广泛应用就是用来把所有元素的margin和padding值设为0：
  1. * { margin:0; padding:0; }
这就是有时所说的全局空白重设

类型选择符
类型选择符匹配所有指定的元素。下面这个示例将匹配文档中所有段落元素p，并设定字段大小为2em：
  1. p {font-size:2em;}
类选择符
类选择符用点号“.”来表示，根元素的class属性值来指定元素。下面这个示例将把所有属性class为info的p元素背景设为红色：
  1. .info { background:#f00; }
你可以给一个元素设定多个类名，不过每个类名中间要用空格隔开。类选择符就可以指向拥有多个类名的元素了。下面的例子中将来定义类名既有info又有error的p元素：
  1. p.info.error { color:#900; font-weight:bold; }
注意：多类选择符IE6.0以前的版本并不支持，IE7支持。

元素类型可以不用写。下面这条语句也同样会应用到所有class为info的p元素中去：
  1. .info { background:#ff0; }
ID选择符
ID选择符用“#”来表示，根据元素的id属性值来匹配元素。下面这个规则将应用到id为info的元素中去，而不管他的类型是什么：
  1. #info { background:#ff0; }
如果同时也指定了元素类型，那么规则将只有应用到指定的类型上：
  1. p#info { background:#ff0; }
有一点一定要记住，ID选择符优先级高于class类选择符，并且在同一文档中id必须唯一。因此，ID选择符制定的样式最终只会应用到文档中的一个元素上。

待续。。。

以上就是第一部分的内容。在第二部分中，我们将学习选择、混合选择符、分组和属性选择符，在第三部分中我们将详细了解伪类和伪元素。
0 留言
标签：
订阅： 评论 (Atom)