设计稿分析

拿到效果图后对页面进行整体的分析，包括页面的布局，各版块之间的关联，页面的颜色搭配，为后续编写html和css做好铺垫。

背景图及图标优化和命名

对页面上所用到的背景图片和图标进行切割优化，可重用性分析，合理的进行图片整合，在保证图片高质量的前提下把文件量优化到最小，文件的命名有一定的意义和关联。

Html和css设计

页面html标签的使用具有一定的语义，标签之间的嵌套标准合理，页面结构的模块化，css的class和id的命名具有一定的意义和关联，css无hack，兼容主流浏览器。

Js效果

页面上所用到的js均是无侵入式脚本，尽可能的实现页面上的行为和结构分离。

绑定cms

页面制作完成之后，把页面所需的图片背景及图标上传到服务器，把页面的css和html进行拆分，分别绑定到cms系统，给html模板加入信息调用标记，实现http访问，然后进行测试，收集测试出的问题进行修改，经过严格测试审核，最后上线运行。

由于本人的js方面比较弱说的可能不是很全面，望大家见谅，谢谢！

overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。 

这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验

 #box{ 

          width:500px; 

          background:#000; 

          height:500px;

 } 

#content { 

          float:left; 

          width:600px; 

          height:600px; 

          background:red;

 } 

      给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出，给box加上这个属性后，我们的content 的宽高自动的被隐藏掉了。另外，我们再做一个试验，将box这个div的高度值删除后，我们发现，box的高度自动的被content 这个div的高度值给撑开了。说到这里，我们再来理解一下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说，都是不起作用的。打个形象的比喻就是当JJ脱离BB的时候，JJ的大小对于BB是没有撑开的作用的（有点少儿不宜的感觉-_-|||） OK，当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给box这个div加上overflow:hidden这个属性的时候，其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了，就好比JJ又进入了BB内，JJ的大小自然又会影响到BB的大小。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个div设置高度的时候，content 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给box这个div加上一个高度值，那么无论content 这个div的高度是多少，box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！

HTML5

HTML 5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些：

HTML5新增和移除的元素

HTML5新增了很多多媒体和交互性元素如video, audio，在HTML4当中如果要嵌入一个视频或是音频的话需要引入一大段的代码，还有兼容各个浏览器，而HTML5只需要通过引入一个标签就可以，就像img标签一样方便。在页面布局和内容实现方面HTML5新增了很多结构化标签元素以及块级及语义元素，如果你要用HTML表示一个文件的上传进度条，在 HTML5中你可以用progress这个元素来表示，它有一个value属性描述了已经完成了多少任务，还有一个属性max描述了这个任务一共需要多少，还可以通过DOM接口得到这个进度条的position属性(只读)，也就是任务完成的百分比。Youtube在HTML5技术上已经做了一个尝试，http://www.youtube.com/html5(需要翻墙) 是用HTML5做的一个DEMO，从整个页面源代码来看，非常简洁。当然HTML5也对一些元素新增了一些属性，如input和textarea的placeholder属性，相当于输入框的输入提示，script有一个async属性会影响脚本的加载和执行。对于所有的HTML共有的属性我们通常把它称作是“全局属性”，如class, id, tabindex, title，HTML5也新增了一些全局属性，如contenteditable, contextmenu, hidden等属性。HTML5还增加了对于微数据的支持，如HTML5新增的item, itempro, subject等属性。

当然HTML5也移除了一些表示页面展现的元素，如font, center, strike等，这些本应该是CSS来做的，所以还是很好理解的，也移除了一些影响网站可访问性的元素如frame, frameset, noframe以及一些不常用的元素如acronym，而采用abbr来表示缩写。HTML5还移除了一些影响客户端兼容性的HTML熟悉，如link的rev属性，td的scope属性；HTML5也移除了一些表示页面展现的属性如一些元素的align,bgcolor属性。

HTML5对表单的支持

HTML5 提供了强大的控件类型如url, email, date, tel等，强大的约束属性，如required表示必填，文件上传的accept属性，以及一些表单重复元素模型的支持，HTML5在提交表单的时候还可以设置提交的方式为XML提交方式，这样服务器端接收到的数据将是XML格式，HTML5的表单被定义为“Web Forms 2.0”，目前opera9.5+对Web Forms 2.0的支持较为完美。

点此查看Web Forms 2.0 DEMO，需要Opera9.5+

HTML5 DOM变化

HTML5在DOM LEVEL 2 HTML方面很多都是继承自HTMLDocument的接口，当然HTML5在DOM上也有一些值得注意的新成员，如：支持 getElementsByClassName，可以根据class类名选择元素，getSelection()将会返回当前选中的对象，在选择器上面有两个方法querySelector和querySelectorAll可以根据 css选择符来获取要查询的元素，相当于YUI3中的Y.one和Y.all。

HTML5的Javascript APIs

HTML5在Javascript上面新增了哪些API呢？

• Video/Audio: HTML5为Video和Audio提供了API来让开发者控制他们自己的用户界面，如可以播放或暂停媒体内容。
• Canvas: Canvas是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。Canvas是一个神奇的东西，它给我的第一感觉就像是在用Photoshop一样，它的每一个方法跟Photoshop 是那么地相似，通过canvas.getContext(‘2d’)就可以得到这个canvas的API，你可以通过fillStyle设置其填充颜色或是通过strokeStyle设置其描边颜色，甚至它画路径的操作跟Photoshop的钢笔操作更是不谋而合。Canvas在很多网站都已经有应用，如Firefox的实时下载状态统计，甚至还可以用canvas来编写Web Game。
• Drag&Drop: 在指示设备的视觉媒体中，”Drag”的操作就是鼠标按下(mousedown)并伴随着鼠标移动(mousemove)的事件，而”Drop”则是鼠标释放时触发的事件。在Drag&Drop里定义了DataEvent和DataTransfer接口，同时当拖拽操作发生时会触发如 dragstart, dragenter, dragleave, drop, dragend等事件。
• Web Workers: 让Javascript多线程，可以在后台做很多工作而不会阻断当前的浏览器操作。
• Geolocation: 地理位置定位，运行navigator.geolocation.getCurrentPosition(success,error)这个方法时浏览器会提示是否要共享你的地理位置，如果选择共享，则会回调success函数，success函数有一个参数是position对象，这个position对象有一个coords对象，coords对象包含了很多地理位置信息如latitude(维度)和longitude(经度)，这样就可以知道你的具体位置了，这个功能在一些手机如Iphone上已经有广泛的应用了。
• Application Cache: 这是HTML5对于离线应用的支持，通过在html元素上加一个属性manifest，浏览器会提示你是否要将数据缓存到客户端，如果用户选择了允许，则会按照指定的manifest文件列表缓存需要的文件，当你的网络不可用时，你还是可以使用这个应用的。对于离线应用，Google也开发了Google Gears浏览器扩展，不过最后Google转投HTML5可能也是看到了HTML5存储和离线应用的这种优势。
• Storage: Webkit已经实现了database storage，你可以像后端操作数据库一样查询数据并执行一些操作。还有一种存储是键值对存储，如sessionStorage和localStorage，可以通过setItem和getItem来存储与获取值，相对于Cookie的存储来说，存储的容量要大很多。
• X-Document Messaging: 浏览器因为安全和隐私的原因，阻止了不同域之间文档的通信，虽然这是一个安全限制，但是对于那些没有危害的不同域的文档通信带来了很多问题，但是HTML5可以实现这种跨文档通信，让我们可以不用管源域是来自哪里，同时可以防止脚本攻击。

HTML5让你心动了吗？那么HTML5什么时候会成为标准呢？据说要等到2022年，这有一个很有意思的网站http://ishtml5readyyet.com/告诉你还有多少天HTML5会真正到来。

点击查看HTML5 DEMO，需要Firefox3.5+/Safari4.0+

CSS3

CSS3对于我们Web开发者来说不只是新奇的技术，更重要的是这些全新概念的web应用给我们带来更多无限的可能性，也极大地提高了我们的开发效率。我们将不必再依赖图片或者Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。

CSS3在选择器上面的支持

利用属性选择器我们可以根据属性值的开头或结尾很容易选择某个元素，利用兄弟选择器可以选择同级兄弟结点或紧邻下一个结点的元素，利用伪类选择器可以选择某一类元素，CSS3在选择器上的丰富支持让我们可以灵活的控制样式，而不必为了选择某些元素给他们加上如”odd”或”even”这样的类名。

CSS3在样式上的支持

有一个调查说开发者最期待CSS3的特性是什么，最后票数最多的是“圆角”，不错，圆角这个功能可以给我们这些前端工程师省去很多时间和精力去切图拼凑一个圆角。CSS3还支持阴影，盒阴影以及文本阴影，渐变，之前你可能是通过IE的滤镜看到过，其实CSS3实现起来更加方便。@font-face可以自定义字体，如果用传统的方式，VD把一个带有特殊文字的设计图给你让你来实现的话你可能会把它做成一个图片，而通过CSS3用@font-face就可以了。CSS3对于连续文本换行也新增了一个属性word-wrap,你可以设置其为normal(不换行)或break-word(换行)，这解决了连续英文字符出现页面错位的问题，也不需要后端去截取这个连续字符。使用CSS3你还可以给边框加背景，这在iphone上也有应用的例子。CSS3在背景上支持背景调整大小，如当你用一张大图要做一个小的元素背景时可以通过background-size来调整背景图的大小来适应这个元素。CSS3支持opacity, rgba和hsl/a, opacity和rgba的区别是opacity设置的透明对其内容也会产生影响，而rgba只对你应用的元素产生影响。CSS3在布局上对于盒模型提供了支持，可以设置box-sizing为content-box或border-box，应用为content-box就是正常的模式，而应用为border-box和IE5.5的盒模型很相似，即元素的宽度包括border和padding，这个在布局上可能会比较方便，不用去管到底这个元素会占用多大的宽度，而用content-box还需要手动计算一下这个元素实际占用的宽度。

CSS3对于动画的支持

CSS3支持的动画类型有：transform(变换)、transition(过渡)和animation(动画)。你可以对特定的属性设置transition，transiton和animation的区别不大，animation的动画是自己定义的，面向的更多的是脚本开发者，往往更加复杂。

为了使用大部分CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分CSS3属性。最常见的私有属性是用于Webkit核心浏览器的(比如, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）

那我们在开发中该如何去用CSS3呢？

我觉得首先是遵循一个优雅降级的原则，比如前面谈到的圆角，我们可以针对Firefox和Safari等这些支持圆角的浏览器中应用CSS圆角，而那些不支持CSS圆角的浏览器则显示为直角。其次就是对于不支持CSS3的浏览器可以使用Javascript来实现，如CSS3任何元素支持:hover伪类，我们就可以对只支持链接:hover的IE6用JS来实现。最后就是在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术。

点击查看CSS3 DEMO，需要Firefox3.5+/Safari4.0+

根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后，决定写这篇文章。总的来说，我注意到由于误导性信息，他们对于table的使用有种先入为主的厌恶。事实上很多人会说”我看到永远不应该使用表格”的说法，但是这绝对是错误的！这个建议只是针对使用HTML表格来定义网页的布局，但是表格在方便的排列数据信息行和列方面非常完美，而且如果你一定要在一个页面上显示表列数据，你就不得不使用它们！为什么不呢？然而，在这种情况下，一些人无视了用于table的某些HTML标签的存在并且不知道该如何正确的使用它们。

HTML有10个表格相关标签。下面是一个带有简介的列表，但是首先，文档要被正确的定义在HTML 4.01/XHTML 1或HTML 5下面:

• <caption> 定义表格标题(4, 5)
• <col> 为表格的列定义属性(4, 5)
• <colgroup> 定义表格列的分组(4, 5)
• <table> 定义表格(4, 5)
• <tbody> 定义表格主体(4, 5)
• <td> 定义一个单元格 (4, 5)
• <tfoot> 定义表格的表注(底部)(4, 5)
• <th> 定义表格的表头 (4, 5)
• <thead> 定义表格的表头(4, 5)
• <tr> 定义表格的行(4, 5)

一个基本的表格结构如下:

它包含一个标题、头部、主体和底部。正确的HTML元素顺序是：

1. <table>
2. <caption>
3. <thead>
4. <tfoot>
5. <tbody>

你也可以使用<col> 和<colgroup> 来定义表格的列或为列分组：

1. <table>
2. <caption>
3. <colgroup>
4. <col>
5. <thead>
6. <tfoot>
7. <tbody>

下面是一个正确的表格结构实例：

<table border="1">
	<caption>Table caption here</caption>
	<colgroup span="1" style="background:#DEDEDE;"/>
	<colgroup span="2" style="background:#EFEFEF;"/>
 
	<!-- Table Header-->
	<thead>
	<tr>
		<th>Head 1</th>
			<th>Head 2</th>
			<th>Head 3</th>
		</tr>
	</thead>
 
	<!-- Table Footer-->
	<tfoot>
		<tr>
			<td>Foot 1</td>
			<td>Foot 2</td>
			<td>Foot 3</td>
		</tr>
	</tfoot>
 
	<!-- Table Body-->
	<tbody>
		<tr>
			<td>A</td>
			<td>B</td>
			<td>C</td>
		</tr>
		<tr>
			<td>D</td>
			<td>E</td>
			<td>F</td>
		</tr>
	</tbody>
</table>

在浏览器中的结果如下图所示:

关于表格的一些技巧

• 根据w3schools的解释和用法，在一个table定义中，<tfoot>元素必须出现在<tbody>之前，这样，浏览器就可以在接受到所有数据之前呈现表注了。另外，如果不是这个顺序，将不能通过W3C的HTML4和XHTML验证，无论你声明哪种DTD。(了解更多)。
• 在 HTML 4.01 中,表格的align和bgcolor属性不赞成使用，所以在HTML 5中不再有任何table的属性被支持（事实上，在XHTML 1.0 Strict DTD中已经不支持”align”和”bgcolor”属性了）；
• 所有主流浏览器都支持<colgroup> 标签，但是Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性；
• css中的empty-cells:show|hide 可以设定空单元格是否显示边框。注意，这个需要设置在table而不是td/th中。IE6中比较容易遇到该问题；
• css中的border-collapse:collapse | separate 可以设置表格的边框是否被合并成一个边框；
• css中的border-spacing属性等效于table的cellspacing属性。

为了实现现在所提倡的表现和结构分离的开发模式，前端观察建议将页面中所有与表现层有关的东东，都用CSS来控制，不用HTML自带的属性来控制页面的表现，而table是最容易被忽略的一个。

关于table的更多详细内容可以查看W3C的文档： w3 Introduction to tables

最后留一个非常简单的问题给大家，CSS的哪个属性等效于table的cellpadding属性？

1.在XHTML中所有的标记都必须要有一个相应的结束标记 ,在 HTML 中，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在 XHTML 中这是不合法的。XHTML 要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个”/”来关闭它。例如: <img  src=”images/.gif” width=”200″  height=”80″ alt=”uedspace” />  或<br/>

2.在XHTML中所有标签的元素和属性的名字都必须使用小写 与HTML 不一样，XHTML 对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML 要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常 dreamweaver 自动生成的属性名字”onMouseOver”也必须修改成”onmouseover”。

3.在XHTML中所有的 标记都必须合理嵌套 因为 XHTML 要求有严谨的结构，因此所有的嵌套都必须按顺序，以前这样写代码：
<p><b></p>/b>    现在必须修改为： <p><b></b>/p> ，一层一层的嵌套必须严格对称。

4.在XHTML中所有的属性必须用引号“”括起来 在HTML 中，你可以不需要给属性值加引号，但是在 XHTML 中，它们必须被加引号。例如: <height=80>  必须修改为： <height=”80″> 特殊情况，你需要在属性值里使用双引号，你可以用”，单引号可以使用&apos;，例如： <alt=”say&apos;hello&apos;”>

5.在XHTML中把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
注：以上字符之间无空格。

6.在 XHTML中 规定所有属性都必须有一个值，没有值的就重复本身。例如： <td nowrap> <input type=”checkbox” name=”shirt” value=”medium” checked>
必须修改为：<td nowrap=”nowrap”> <input type=”checkbox” name=”shirt” value=”medium” checked=”checked”>

7.在XHTML中不要在注释内容中使“–”
“–”只能发生在 XHTML 注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:
<!–这里是注释———–这里是注释–>
用等号或者空格替换内部的虚线。
<!–这里是注释============这里是注释–>

CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。

避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式更加灵活。

CSS的优先级

在深入研究高级CSS选择器领域之前，理解CSS优先级是如何工作的是很重要的，这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题

当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。

那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1

1. 第一个数字(a)通常就是0，除非在标签上使用style属性；
2. 第二个数字(b)是该选择器上的id的数量的总和；
3. 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
4. 第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
5. 通用选择器(*)是0优先级；
6. 如果两个选择器有同样的优先级，在样式表中后面的那个起作用。

让我们看几个例子，这样或许比较容易理解些：

• #sidebar h2 — 0, 1, 0, 1
• h2.title — 0, 0, 1, 1
• h2 + p — 0, 0, 0, 2
• #sidebar p:first-line — 0, 1, 0, 2

在下面的例子中，第一个将会起作用，因为它比第二个优先级高：

• #sidebar p#first { color: red; } — 0, 2, 0, 1
• #sidebar p:first-line { color: blue; } — 0, 1, 0, 2

至少基本理解优先级是如何工作的是很重要的，但是一些工具比如Firebug，在我们审查指定元素的时候，按照选择器的优先级列出所有的css选择器对让我们知道在指定元素上哪个选择器是有效的是很有用的。

让你非常容易的看到那个选择器作用于一个元素上了。

有用的文章:

• CSS Specificity: Things You Should Know
• Link Specificity¯MeyerWeb
• CSS: Specificity Wars
• Assigning property values, Cascading, and Inheritance—W3C

1. 属性选择器

属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。

有6个不同类型的属性选择器：

• [att=value]
  该属性有指定的确切的值。
• [att~=value]
  该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。
• [att|=value]
  属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)
• [att^=value]
  该属性的值以指定值开始。
• [att$=value]
  该属性的值包含指定的值(而无论其位置)。
• [att*=value]
  该属性的值以指定的值结束

比如，如果你想要改变你的博客上的日志部分元素的背景颜色，你可以使用一个指定每一个class属性值以“post-”开始的div的属性选择器：

div[class|="post"] {
	background-color: #333;
	}

该语句将匹配所有class属性包含”post”并带”-”字符的div元素。(注：此处英文原文有些上下文不对应，我已经更正——译者，神飞)

属性选择器的另一个很有用的用处是定位不同类型的input元素。比如，如果你想让你的文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：

input[type="text"] {
	width: 200px;
	}

这将匹配所有type属性值等于“text”的input元素。

现在我们可能像为网站上不同的文件类型的链接添加不同的图标，这样你的网站的访客就会知道他们将获得一个图片、或者PDF文件、或者是一个word文档等。这就可以使用属性选择器来实现：

a[href*=".jpg"] {
	background: url(jpeg.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}
 
a[href*=".pdf"] {
	background: url(pdf.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}
 
a[href*=".doc"] {
	background: url(word.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}

在此例中，我们使用了一个定位所有的链接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。详细可查看前端观察之前的一篇文章《使用CSS选择器创建个性化链接样式》

浏览器支持

除了Internet Explorer 6，所有的主流浏览器都支持属性选择器。这意味着，如果你在你的网站上使用了属性选择器，你应该确保IE6用户将仍能获得一个可用的网站。比如我们的第三个例子，为链接添加图标可以给你的网站带来另一个级别的可用性，但是如果这些链接不显示任何图标，该网站仍然还是可用的。

2. 子选择器

子选择器用符号“>”表示。它允许你定位某个元素的第一级子元素。

比如，如果你想匹配所有的作为你的网站侧栏的div的子元素的h2元素，而不是可能是在div元素内的所有h2元素，也不是div的孙元素(或者更低级别的)，你就可以使用下面的选择器：

div#sidebar > h2 {
	font-size: 20px;
	}

你当然也可以同时使用子元素和后代元素。比如，如果你想定位只有在body元素的子级div元素内的blockquote元素(比如你想匹配主要的div内的blockquotes，而不是其它部分的：

body > div > div blockquote {
	margin-left: 30px;
	}

浏览器支持

和属性选择器一样，子选择器不被IE6支持。如果你通过这种方式要实现的效果和网站的可用性或总体设计息息相关，你可以考虑使用一个class，或者使用只针对IE6的样式，但是这将有悖使用子选择器的目的。

3. 兄弟组合

有两类兄弟组合：临近兄弟组合和普通兄弟组合

临近兄弟组合

该选择器使用加号“+”来链接前后两个选择器。选择器中的元素有同一个父亲，而且第二个必须紧紧的跟着第一个。

临近兄弟组合可以灰常有用，比如，在处理文字的时候。比如我们想对段落后面的h2标题添加一个顶间距“margin-top”(当然或许你无需为h1标签后面的h2添加，或者它可能是页面的第一个元素)：

p + h2 {
	margin-top: 10px;
	}

你甚至可以更加具体，你想定位某个特定的div后面的h2：

div.post p + h2 {
	margin-top: 10px;
	}

或者你可以搞得更加复杂：页面的第一个段落的第一行字母显示为小写字母。

.post h1 + p:first-line {
	font-variant: small-caps;
	}

因为可能大部分日志/文章的第一个段落都会紧紧的在H1标签的后面。你可以在你的选择器中借助于h1标签。

普通兄弟组合

普通兄弟组合和临近兄弟组合的工作原理很像，不同的是第二个选择其无需紧紧跟随第一个。

如果你需要定位所有的某个特定的div里面并且跟在h1标签后面的p标签的话(你可能想要这些p标签比拟的日志的标题前面的文字大些)，你就可以使用这个选择器：

.post h1 ~ p {
	font-size: 13px;
	}

注：这两个选择器太像了，所有不是很好理解，可以试一试下面的这个例子：

CSS:

p + h2{color:red;
	}
	p ~ h2{font-weight:700;
	}

HTML:

<p>咳咳，内容。</p>
<h2>标题1</h2>
<h2>标题2</h2>

看看第二个h2的颜色就可以理解了吧？临近兄弟组合只能匹配第一个选择器后面的第一个兄弟选择其，普通兄弟组合则能匹配所有。注：该部分英文原文没有，是神飞翻译时自己添加。

浏览器支持

Internet Explorer 6依然不能理解兄弟选择器，但是，另一种情况，如果你的用户中只有一小部分是IE6用户，而且网站的结构不会被破坏或者受到严重影响，这是实现很多很酷的效果而无需在你的HTML代码中添加无用的class或id。

4. 伪类

动态伪类

之所以被称为动态伪类是因为它们并不存在于HTML中——而是只有当用户和网站交互的时候才会呈现。

有两类动态伪类：链接 和用户行为。链接就是:link 和:visited，而用户行为包括:hover、:active 和:focus。

在本文中提到的css选择器中，这几个应该是最常用到的。

:link伪类用于链接尚未被用户访问的时候，而:visited 伪类用于用户访问过的链接，也就是说它们是相反的。

:hover伪类用于用户移动他们的鼠标在元素上，而尚未触发或点击它的时候。:active伪类应用于用户点击元素的情况。最后，:focus伪类用于元素成为焦点的时候——最常用于表单元素。

你可以在你的样式表中使用多种用户行为动态伪类，这样你就可以，比如，根据用户的鼠标只是滑过或悬停的时候，为一个输入框定义不同的背景色:

input:focus {
	background: #D2D2D2;
	border: 1px solid #5E5E5E;
	}
input:focus:hover {
	background: #C7C7C7;
	}

浏览器兼容性

动态伪类被所有的现代浏览器支持，甚至IE6，但是请注意，对于IE系列浏览器来说，IE6只允许:hover 伪类应用于链接元素(a标签)而且只有IE8接受:active状态。

:first-child

:first-child伪类允许你定位某个元素第一个子元素。比如，如果你想给你的无须列表的第一个li添加一个margin-top，你就可以这样写：

ul > li:first-child {
	margin-top: 10px;
	}

让我们来看一看另一个例子:比如你想让你的博客的侧栏的H2标签都有个顶部边距，以将标题和它们前面的内容区分开来，但是第一个h2不需要，你就可以使用下面的代码：

#sidebar > h2 {
	margin-top: 10px;
	}
 
#sidebar > h2:first-child {
	margin-top: 0;
	}

浏览器兼容性

IE6 不支持 :first-child 伪类。根据伪类应用到的设计的不同，它或许不会成为关注的主要问题。比如，如果你使用:first-child 选择器来移除标题或段落上的头部或底部的间距，你的布局在IE6中不会坏掉，它只会看起来有些不同。但是如果你使用:first-child选择器从一个，比如浮动元素，移除左边距或右边距，将会让你的设计乱掉。

语言伪类

语言伪类:lang()，允许你匹配一个基于它的语言的元素。

你如，你想让你的网站的某个特定的链接根据页面的语言有不同的背景颜色：

:lang(en) > a#flag {
	background-image: url(english.gif);
	}
 
:lang(fr) > a#flag {
	background-image: url(french.gif);
	}

这个选择器将会匹配相关的链接——如果页面的语言等于“en”或“fr”，或者以“en”或“fr”开头并在后面带个连字符“-”的话。

浏览器兼容性

不幸的是，只有IE浏览器中只有IE8支持该选择器，其它的主要浏览器都支持该伪类选择器。

5. CSS 3 伪类

:target

当你使用锚点(片段标识符 fragment identifier)的时候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，这“#comments”就是一个片段标识符，你就可以使用:target伪类来控制目标的样式。

举个例子，比如你有一个很长的使用了很多文字和h2标题的页面，然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时，相应的标题以某种方式高亮，然后滚动到相应的位置，对读者就会很有用。很简单。

h2:target {
	background: #F2EBD6;
	}

浏览器兼容性

这一次，IE浏览器完全不支持:target伪类，另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器。但是其它的各个主流浏览器都支持该选择器。

UI元素状态伪类

有些HTML元素有enable 或disabled 状态(比如，文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled、:disabled 或:checked 伪类来分别定位。

那么你就会想，如果任意一个禁用的(disabled)文本框应该使用浅灰色的背景和虚线边框：

input:disabled {
	border:1px dotted #999;
	background:#F2F2F2;
	}

你也可能会想让所有选中的复选框有个左边距(这样就可以在众多的复选框中很容易认出来)：

input[type=”checkbox”]:checked {
	margin-left: 15px;
	}

浏览器兼容性

所有的主流浏览器，除了我们常常不报希望的IE系列浏览器，都支持UI元素状态伪类。如果你考虑只是添加附加级别的细节和增强网站的可用性，这个仍然是可以采用的。

6. CSS 3 结构伪类

:nth-child

:nth-child()伪类允许你定位某个父级元素的一个或多个特定的子元素.

你可以通过定义它的值为一个整数来定位某个单个子元素：

ul li:nth-child(3) {
	color: red;
	}

这将会让ul元素的第三个li元素的文字变成红色。注意如果在ul里面有个其它类型的元素(不是li)，它也会算作其子元素。

你可以使用表达式来定位子元素。比如，下面的表达式将从第四个开始匹配每第三个元素。

ul li:nth-child(3n+4) {
	color: yellow;
	}

在上面的这个例子中，第一个黄色的li元素将会是第四个。如果也想从第一个开始匹配，你可以使用一个简单的表达式：

ul li:nth-child(3n) {
	color: yellow;
	}

这样的话，第一个黄色的li元素将会是第三个子元素，然后是它后面的每隔第三个。现在想象一下如果你只想匹配列表中的前四个子元素：

ul li:nth-child(-n+4) {
	color: green;
	}

:nth-child的值同样也可以被定义为“even” 或“odd”，和“2n” (第偶数个) 或“2n+1” (第奇数个)的效果是一样的。

:nth-last-child

:nth-last-child伪类基本上和:nth-child伪类的作用相同，但是它从最后一个元素开始算。

使用上面的一个例子来看看：

ul li:nth-child(-n+4) {
	color: green;
	}

不是匹配最前面的四个li元素，该选择器匹配最后面的四个元素。

你同样可以使用“even” 或“odd”只，同样与nth-child不同的是，这是从最后面的元素开始算的：

ul li:nth-last-child(odd) {
	color: grey;
	}

:nth-of-type

:nth-of-type伪类和:nth-child也很像，不同的是它只计算选择器中指定的那个元素。

这对定位元素中包含大量不同的元素的情况会很有用。比如，我们想控制一个文本块中的每隔一个段落，但是我们又想要无视其它元素比如图片和引用块：

p:nth-of-type(even) {
	color: blue;
	}

你也可以使用一些值，就像在:nth-child中使用的一样。

:nth-last-of-type

你能猜到它吧？！:nth-last-of-type 伪类可以像前面提到的:nth-last-child一样使用，但是这次，它将之匹配你在选择器中指定的元素类型：

ul li:nth-last-of-type(-n+4) {
	color: green;
	}

我们可以更加的聪明一些，在一个大的块级选择器中结合多种这样的伪类。比如我们想让文章中的所有的图片左浮动，除了第一个和最后一个(我们可以假设他们是满宽的，无须浮动)：

.post img:nth-of-type(n+2):nth-last-of-type(n+2) {
	float: left;
	}

所以在这个选择器的第一部分，我们从第二个图片开始定位每一个图片。在第二部分中，我们定位所有的图片，除了最后一个。因为这两个选择器并非互斥的，我们可以同时使用它们，这样就可以一下子排除第一个和最后一个元素！

:last-child

:last-child伪类的作用类似于:first-child 伪类，但是会定位父级元素的最后一个子元素。

让我们假设你不想让你的日志的div的最后一个段落也有一个底部边距：

.post > p:last-child {
	margin-bottom: 0;
	}

该选择器将定位class为”post”的元素的最后一个直接子级段落。

:first-of-type 和:last-of-type

:first-of-type 伪类用于定位一个父级元素下的第一个同类子元素。

比如，你可以定位某个特定的div的第一个子级段落(p)，并让其第一行字母大写:

.post > p:first-of-type:first-line {
	font-variant: small-caps;
	}

在这个选择器中，你可以确定你是在只定位class为”post”的元素的直接子级p元素，而且还是匹配第一个子级p元素。

:last-of-type伪类与此类似，只是匹配最后一个子元素。

nly-child

nly-child伪类表示一个元素是它的父级元素的唯一一个子元素。

比如说，你有一些盒子(“news”)，里面有一些文字段落，当你有多于一个段落的时候，你想让文字比只有一个段落的时候小一些：

div.news > p {
	font-size: 1.2em;
	}
 
div.news > p  nly-child {
	font-size: 1.5em;
	}

第一个选择器中，我们定义”news”div的所有子级p元素的字体大小。在第二个中，我们覆盖之前的字体大小，如果该p元素是“news” div的唯一子元素的时候，它的字体大小会比较大一些。

nly-of-type

nly-of-type伪类表示一个元素是它的父级元素的唯一一个相同类型的子元素。

这有用什么用？假设你有一些日志，每一篇都有个class为”post”的div，他们中的一些有多于一张图片，但是有些可能就只有一张图片。你想让后者中的图片水平居中，而在其它的有多于一张图片的日志中，就将它左浮动。这个需求用这个选择器就很容易实现：

.post > img {
	float: left;
	}
 
.post > img  nly-of-type {
	float: none;
	margin: auto;
	}

:empty

:empty伪类表示一个元素里面没有任何内容。

这个选择器可以用很多种用途。比如，你在你的“sidebar”中有若干个盒子，但是不想让空盒子显示出来：

#sidebar .box:empty {
	display: none;
	}

注意，就算”box”div里面只有一个空格，它也不会被css当作空标签的，这样就不能匹配该选择器了。

浏览器支持

Internet Explorer (直到8.0版本)都不支持结构伪类。Firefox、Safari 和Opera 在其最新版本的浏览器中指出这些选择器。这意味着，使用这些选择器对网站的可用性和可访问性是很有用的，或者如果网站的用户中的大部分是使用IE而且你不想在某些细节上无视他们，最好还是保持使用通用的class和简单的选择器来迎合这些选择器。否则你会被搞疯的！

7. 否定选择器

否定选择器:not()，可以让你定位不匹配该选择器的元素

比如，如果你需要定义表单元素中的input元素，但是又不想包括submit类型的input的时候会灰常有用——你想它们有不同的样式，以看起来像按钮：

input:not([type="submit"]) {
	width: 200px;
	padding: 3px;
	border: 1px solid #000000;
	}

另一个例子，你想你的日志的div中的所有段落(p)有比较大的字体，除了表示时间和日期的段落：

.post p:not(.date) {
	font-size: 13px;
	}

你可以想象这个选择器能带给你的潜力了吧，你能够从你的CSS文件中剥离(剔除)的无用的大量选择器也被它广泛支持吗？

浏览器支持

Internet Explorer在这里常常是让我们感到扫兴的东西：一点都不支持，甚至在IE8中。这大概意味着这些选择器将仍不得不等到一些开发者开始不再顾虑将它添加到他们的样式表中才会普及。

8. 伪元素

伪元素允许你操作HTML中不是真实存在的元素，比如一个文本块的第一行或者第一个字母。

伪元素在CSS 2.1中就已经存在，但是CSS 3说明书表示他们应该使用双冒号“::”，以与伪类区分开来。在CSS 2.1中，他们也是使用单个冒号“:”的。浏览器会将能够接受两种格式，除非这些伪元素只存在于CSS3中。

::first-line

::first-line伪元素将匹配block、inline-block、table-caption、table-cell等等级别元素的第一行

这对在你的文字块上添加一些微妙的排版细节相当有用，比如，将一片文章的第一行文字改成小写字母：

h1 + p::first-line {
	font-variant: small-caps;
	}

如果你专心的阅读了我们前面的内容，你将会了解到上面的语法意味着，紧紧的跟在H1标签之后(+)的段落会将其第一行文字显示为小写字母。

你也可以针对相关的div的第一行，而不用针对实际的段落标签(p):

div.post p::first-line { font-variant: small-caps; }

或者更进一步，定位某个特低的div的第一个段落的第一行：

div.post > p:first-child::first-line {
	font-variant: small-caps;
	}

这里，“>”符号表示你指定的是post div的直接子级元素，这样如果段落被包括在第二级div中，它就不会匹配这个选择器。

::first-letter

::first-letter伪元素将会匹配一个文本块的第一个字母，除非在同一行里面包含一些其它元素，比如图片。

和::first-line伪类一样，::first-letter通常用于给文本元素添加排版细节，比如下沉字母或首字母。

这里是如何使用::first-letter伪元素创建首字下沉的例子:

p {
	font-size: 12px;
	}
 
p::first-letter {
	font-size: 24px;
	float: left;
	}

注意如果你在某些元素中同时使用::first-line 和::first-letter ，::first-letter 属性将覆盖从::first-line中继承下来的某些属性。

如果你不知道W3C规则的话，这个元素有时会产生意想不到的结果：它事实上是使用最长的规则的选择器！所以如果你计划使用它的话最好仔细的阅读一下 (其它选择器也一样)。

::before 和 ::after

::before和::after 伪元素用于在一个元素的前面或后面插入内容，纯CSS方法。

这些元素将继承它们将附加的元素的大部分属性。

假设你想在你的页面中的图标的描述前面添加文字“Graphic number x:”。你将无需写文字“Graphic number”，或者自己手动添加数字：

.post {
	counter-reset: image;
	}
 
p.description::before {
	content: "Figure number " counter(image) ": ";
	counter-increment: image;
	}

那么这会产生什么？

首先，我们告诉HTML来创建“image”计数器。比如我们可以添加该属性到页面的body。同样我们也可以给该计数器起任何一个名字，只要你想，只要我们常常使用同样的名字引用它：自己试试吧！

那么我们想在class为”description”的每一个段落之前添加这一块内容: “Figure number ” — 注意只有我们在引号里面写的内容才会被创建到页面中，所以我们也要添加一个空格！

然后，我们就有了counter(image):这将用到我们之前在.post选择器中定义的属性。它默认会从数字1开始。

下一个属性在那里表示计数器知道对于每一个p.description，它需要将image计数器增加1 (counter-increment: image)。

它并不像看起来的那么复杂，而且还会灰常的有用。

::before和::after伪元素常常只使用content属性，来添加一些短语或排版元素，但是这里我们展示了我们如果以一种更加强大的结合counter-reset和counter-increment属性的方式来使用它们。

有趣的是: ::first-line 和::first-letter 伪元素可以匹配使用::before伪元素生成的内容，如果存在的话。

浏览器支持

如果使用单个冒号的话(比如, :first-letter, 而不是::first-letter)，这些伪元素被IE8支持(但是不被IE7或6支持)。但是左右其他的主流浏览器都支持这些选择器。

结语

乏味的讲述终于结束了，现在该你来领悟本文的要义并自己尝试了: 开始通过创建实验性的页面并测试所有的这些选择器，在有疑问的时候返回这里并确保总是遵循W3C的规则，但是请不要只是坐在那里想这些选择器尚未被完全支持你就无视它们。

如果你敢于冒险，或者你不害怕放弃之前的遍地无用和非语义化的class和id，为什么不尝试一两个这些强大的CSS选择器到你的下一个项目中呢？我们保证你不会回头的！

参考

• CSS 2 Selectors — W3C
• CSS 3 Selectors Level 3 — W3C
• Comparison of layout engines (Cascading Style Sheets) — Wikipedia
• Generated content, automatic numbering, and lists — W3C

扩展资源

• Keeping Your Elements’ Kids in Line with Offspring — A List Apart
• Selectutorial – CSS selectors
• A Look at Some of the New Selectors Introduced in CSS3
• CSS 2.1 selectors, Part 1 and Part 2
• CSS 3 selectors explained
• CSS selectors and pseudo selectors browser compatibility
• 10 Useful CSS Properties Not Supported By Internet Explorer
• Styling a Poem with Advanced CSS Selectors

关于作者

Inayaili de León 是一个葡萄牙网页设计师。她对网页设计和前端编码有特别的爱好，而且喜欢漂亮和间接的网站。她居住在伦敦。你可以在Web Designer Notebook看到她的更多文章并follow her on Twitter。

怎样才能写出符合标准的又具有语义的html页面？就是把合适的标签用到合适的位置上。不要只依赖div，span ，html博大精深，我们现在只用其中的一部分。

    既然是悟道web标准，就不会那么简单了，期望是站在架构的层面，全局的看待web标准，期望站在众多的页面工程师的立场和企业老板的立场谈论这个话题。

    革命要成功，思想要统一，我因为有必要给每一个页面工程师的作战单位配备一个“政委”，时刻监督和提醒页面工程师们要认真贯彻W3C的中心思想和规范条款，不得松懈。心里只有一个想法，W3C标准好！

    这也就是我这篇的主题“统一思想，遵循标准”，不论你受到多大的诱惑，非标准化的应用可以帮你加薪，晋级，table的布局可以快速的完成你的需求，你都要忍住，抵制诱惑。因为诱惑都是暂时的，真理才是永恒。

    统一思想，WEB标准的思想是什么？

    一、就是W3C系列规范，html4.0，xhtml1.0，css2.1，ECMAScript，DOM,XML等等，作为一个页面工程师，要学会熟读标准，认识和了解标准。要检验你的代码是否和标准一致，要了解W3C标准的优势和用意，假如用语言距离，普通话让中国人彼此能够沟通，英语让世界人可以沟通。W3C标准就是让页面在不同的终端都可以运行，让使用各种终端的用户都能浏览你的页面，也就是跨越平台，获得更大众化的用户的使用。

    二、分离，结构，表现，行为三者的分离，结构是严格的语义化HTML文档编写，CSS是HTML页面的视觉处理，行为是通过用户行为的触发去动态改变页面，内容修改，功能的完成等等。分离不是简单的文件的分离，而是严格的分工的分离，不要用table去布局，那是css的事情，不要用hx去调整字体大小，那也是CSS的事情。结构=内容+语义化的解释内容。表现=页面内容的呈现效果。行为=用户触发去改变内容和HTML和CSS。

    web标准是一场革命，这是我在腾讯的时候认识到的，革命——就是推翻旧的落后的体制，建立一个全新的先进的体制。

    落后的页面工程师体系，美工代劳的页面代码，唯独IE才能浏览的页面代码，不需要写代码用图形工具直接导出的页面代码，大量的流量消耗的页面代码，速度慢的像蜗牛的页面代码，程序员看到就头大发麻的页面代码，每次改版修改都要打动干戈，重复产生的页面代码，一种让页面工程师和民工一样的页面代码。

    我们当然要革命它，取代他，创造全新的页面工程师体系和页面质量，独立的页面工程师完成的页面代码，跨越平台的页面代码，只要能解析页面的设备都能够访问和浏览，手写的页面代码，整齐划一，层次分明，最低流量消耗的页面代码，程序员喜欢的页面代码，访问速度超快的页面代码，改版可重复利用的页面代码，让页面工程师抬起头来，骄傲的称自己是工程师，书写的也是计算机代码的页面代码。

    革命总会产生抵制和倒退，再懒惰的，自甘低下的，为了蝇头小利背叛标准的页面工程师面前标准渐渐的遭受非议，再低级的，弱智的程序员面前，没有可视化的辅助找不到再那里填数据，大谈table布局优秀的时候，当没眼光的老板和项目经理要求上线紧急，图形工具直接生成页面的时候，我们的革命遭受到阻碍和抵抗，我们的信心也在动摇。这个时候怎么办，如果放弃革命就失败了，理想也就破灭了，前途是光明的，道路是曲折的，只能说坚持就是胜利，中国的民主革命既然能成功，为什么我们的页面革命成功不了。

    总结：革命尚未成功，同志仍需努力。统一思想排除杂念遵循标准。

    下篇预告：悟道web标准——让W3C标准兼容终端