属性选择器(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 }
代码laycode - v1.1
该语句将匹配所有class属性包含”post”并带”-”字符的div元素。(注：此处英文原文有些上下文不对应，我已经更正——译者，神飞)
属性选择器的另一个很有用的用处是定位不同类型的input元素。比如，如果你想让你的文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：
input[type="text"] { width: 200px }1
代码laycode - v1.1
这将匹配所有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 }
代码laycode - v1.1
在此例中，我们使用了一个定位所有的链接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。详细可查看前端观察之前的一篇文章《使用CSS选择器创建个性化链接样式》
浏览器支持
除了Internet Explorer 6，所有的主流浏览器都支持属性选择器。这意味着，如果你在你的网站上使用了属性选择器，你应该确保IE6用户将仍能获得一个可用的网站。比如我们的第三个例子，为链接添加图标可以给你的网站带来另一个级别的可用性，但是如果这些链接不显示任何图标，该网站仍然还是可用的。
2. 子选择器
子选择器用符号“>”表示。它允许你定位某个元素的第一级子元素。
比如，如果你想匹配所有的作为你的网站侧栏的div的子元素的h2元素，而不是可能是在div元素内的所有h2元素，也不是div的孙元素(或者更低级别的)，你就可以使用下面的选择器：
div#sidebar >h2 { font-size: 20px }1
代码laycode - v1.1
你当然也可以同时使用子元素和后代元素。比如，如果你想定位只有在body元素的子级div元素内的blockquote元素(比如你想匹配主要的div内的blockquotes，而不是其它部分的：
body >div >div blockquote { margin-left: 30px }
代码laycode - v1.1
浏览器支持
和属性选择器一样，子选择器不被IE6支持。如果你通过这种方式要实现的效果和网站的可用性或总体设计息息相关，你可以考虑使用一个class，或者使用只针对IE6的样式，但是这将有悖使用子选择器的目的。
不让链接，去百度里查查这些文章：postMessage--HTML5 跨域信息交互技术
语义性：对HTML5中Article、section和div的重新认识
HTML5中新增的结构化标签元素
你知道HTML标签设计的本意吗？
微数据microdata案例剖析：大众点评网的微数据应用
HTML5微数据Microdata的意义和优势
HTML5微数据寄望：语义网的春天
HTML5之扩展应用微数据microdata前传-语义网及schema
HTML5规范中微数据MicroData浅析
HTML5获取地理位置信息Geolocation API的基本知识
了解CSS3中的Media Queries
网页前端开发：新浪微博CSS3适用细节初探
CSS跨浏览器兼容性的编码原则
利用CSS3的transition属性实现视觉引导
CSS3学习之风骚RGBA
Jquery和CSS3实现图片鱼眼显示效果
推荐10个使用的CSS开发工具
坑爹的CSS不起作用
小馅饼-让IE6~IE8支持CSS3的插件CSS3PIE
CSS3伪类学习之开篇：结构伪类
都是网页样式code，不同的在于css3比css多了一些样式设置而已。css3是向前兼容的，也就是说，css中有效的code在css3也有效。
以上是纯code方面来看，而对于具体的显示效果，还要看浏览器对其的支持情况。
举2个简单的例子：
一、一个css与css3都有效的code，如果浏览器不支持css3，那么只会以css的样式显示。最常见的就是圆弧角。
二、一个只在css3中有效的code，如果浏览器不支持css3，那么其显示效果就不会出现。
css3和css，在编写code的时候，除了对一些css3中新出现的属性设置，其它完全一样。
