若是就HTML而言，CSS中的选择符除了自定义的class和id之外，一般就是预置的HTML元素标签了，如p、h1、em甚至html等。但是XML就不一样，原书中有这样一段话：
In XML, a selector could be anything, since XML allows for the creation of new markup languages that can have just about anything as an element name.
意即在XML中用户似乎可以自定义标签的名称（本人没有研究，所以不敢用肯定的语气…），因此任何字符串都可能以合法元素标签名的形式出现在CSS选择符的位置上。
QUOTE {color: gray;}
BIB {color: red;}
BOOKTITLE {color: purple;}
MYElement {color: red;}
2.1.3. Declarations and Keywords – 声明和关键字
其实这里翻译成”关键字”可能会让人容易混淆，但原书中的确使用了” Keywords”这个单词，记得描述CSS规则结构的那张图么，事实上这里的”关键字”指的就是”value”，即”值”。很多时候一条CSS声明的属性只有一个值，但也有多个值的情况，如font：
p {font: medium Helvetica;}
这里多个值之间用空格分隔，但还有一种特殊情况，依然是font中的字号和行高：
P {font:12px/20px;}
另外如果CSS中使用了错误的属性或值，会使得该声明失效，理论上这条作废的声明不会影响到该条CSS规则中的其它声明，但不论从哪个角度讲，我们应该尽量避免无效声明的出现。当然如果使用记事本来编写CSS的话谁都无法保证不出差错，在此建议大家不妨使用一些专门的CSS编辑软件，至少里面的代码提示功能可以从很大程度上降低拼写错误的概率。就我个人而言，除了DW之外，也只用过TopStyle，没有很强悍的发言权，但或多或少体验到了其中的便利。
《CSS元素选择符》参考资料
CSS编辑器TopStyle使用技巧
TopStyle汉化正式版下载地址
《CSS元素选择符》相关视频教程下载【FLV格式 – 5.36MB】
《CSS权威指南 – 第3版》撷英及配套视频：- CSS选择符
CSS Rule – 规则结构
一张相当直观的图片加以说明：
虽然很简单，但是如果是初学者，建议还是熟记选择符、声明、属性等术语，至少以后看其它CSS教程的时候不会摸不着头脑。事实上CSS在实际书写的时候具有很大的灵活性，适当的空格和换行不会对其产生影响，有人喜欢缩进，有人喜欢分行，哪种更好没有一个很固定的衡量标准，很大程度上视乎个人习惯，大家不妨看一下《柳暗花明：整理及优化CSS代码的七个原则》这篇文章。
《CSS语法规则结构》参考资料
CSS rule Structure – CSS规则结构图例若干
《CSS语法规则结构》相关视频教程下载【FLV格式 – 2.28MB】
《CSS权威指南 – 第3版》撷英及配套视频：- CSS Syntax
Chapter 2. Selectors – 选择符
引言部分主要讲述CSS在外观全局控制方面的优势，我想这一点但凡想学CSS的都知道是怎么回事。当然其中也提到了一些CSS力所不能及的事情，如改变GIF图片中的颜色等。这一点不禁让我想到全国哀悼日时很多网站的素装活动，用一行代码让整个网站呈黑白色调，代码如何写我已经没什么印象了，可能还是属于CSS滤镜的范畴吧。
2.1. Basic Rules – 基本规则
如果我们想让网页中的H2标题文字显示为灰色，传统的HTML书写（即不用CSS）方法如下：
<h2><font COLOR="gray">This is h2 text</font>
这种做法的不方便之处不言而喻，如果一张网页里有10000个H2，全部如此把它们修改为灰色的话，你的手尽情的抽筋吧。终于全部改完了，如果头儿心血来潮：“灰色不好看，改成绿色试试看～”这时候你应该想死的心都有了。用CSS的话，把H2文本设置为灰色，只消在样式表中写一句：
h2 {color: gray;}
绿色的好看？那就花两秒钟改一下:
h2 {color: green;}
《CSS基本语法规则》参考资料
CSS 颜色名称及配色参考
CSS配色十大经典网站
《CSS基本语法规则》相关视频教程下载【FLV格式 – 2.28MB】
《CSS权威指南 – 第3版》撷英及配套视频：- CSS Syntax
随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，奋斗网络也成为了CSS网页布局技术学习的先锋站点，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。
如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——DIV+CSS。
CSS网页布局的意义体现在如下方面：
一、使页面载入得更快
由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
二、降低流量费用
页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率
由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性
DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力
我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。
说了这么多CSS网页布局的意义与优点，同时也不能轻视CSS网页布局的副作用：
一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。
二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。
三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。
四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
综合以上讨论的DIV+CSS优势和略势，我认为不可盲目跟风，如何更有效、更合理的运用WEB2.0设计标准，这需要很长时间的学习和锻炼。而如何将DIV+CSS运用的更好，我觉得这需要通过不断的实践和体检，积累丰富的设计经验，才能很好的掌握这门技术。
你有没有觉得你的CSS样式表文件过于臃肿？其实如果你注意并培养一些比较好的CSS书写习惯，我想你的CSS样式表过于”肥胖”的问题会得到很好的改善的。来看看下面的简单5步吧，掌握之后你便能立即为你的CSS样式表修身了。
第一步:学会如何组合选择器
什么是选择器?
如果你还不知道什么叫做”选择器”，你可以先参考一下w3schools.com的CSS语法概述。
未优化的CSS代码
在下面的图例中，你会看到来自三个不同选择器的同样的CSS属性声明。
优化的CSS代码
你可以将上面的css代码优化组合，让所有CSS选择器使用同一组属性。每个选择器之间用逗号分割开，像下面这样。
h2, p, .block {
font-size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 url(crown.gif) no-repeat 5px 10px;
}
查看Demo实例
第二步:了解CSS选择器优先级
什么是CSS优先级?
选择器优先级是用于在CSS代码中同一个选择器使用不同属性时CSS优选处理哪些属性的规则。对选择器优先级不了解的话可以参考:Juicy Studio –选择器优先级。
未优化的CSS代码
理解优先级规则中不同等级重要性是很必要的，如果写了同样优先级的CSS声明将有可能导致代码冲突和代码臃肿。
查看Demo实例
优化的CSS代码
当你完全掌握CSS选择器优先级之后，你便能通过合并统一的属性声明来所见代码量，然后再单独声明元素的独有属性。你会很快找到优化CSS代码的技巧，对完成合并和匹配代码。下面是关于优化上图代码的实例:
h2 {
font-size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 no-repeat 5px 10px;
}
h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}
#featured h2.twitter {
background-color: #fffdd7;
border: 1px solid #ddd991;
}
第三步:学会如何合并类和ID
和之前类似，你也可以通过匹配合并class名和id值来优化你的CSS代码。请记住,为同一个元素添加不同的多个class，你就可以通过组合不同的属性声明在实现你希望的效果。在适当的位置添加id属性也是可以让你对样式有更多的控制权。
HTML
<div id="featured">
<h2 CLASS="best double">Best …
