CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。
避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式更加灵活。
CSS的优先级
在深入研究高级CSS选择器领域之前，理解CSS优先级是如何工作的是很重要的，这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题
当我们写CSS的时候我们必须注意有些选择器在级联（cascade）上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。
那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1， 1， 1， 1 或0， 2， 0， 1
第一个数字（a）通常就是0，除非在标签上使用style属性；
第二个数字（b）是该选择器上的id的数量的总和；
第三个数字（c）是用在该选择器上的其它属性选择器和伪类的总和。这里包括class （.example） 和属性选择器（比如 li［id=red］）；
第四个数字（d）计算元素（就像table、p、div等等）和伪元素（就像：first-line等）；
通用选择器（*）是0优先级；
如果两个选择器有同样的优先级，在样式表中后面的那个起作用。
让我们看几个例子，这样或许比较容易理解些：
#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;
}
延伸阅读:
CSS3的新特性介绍
CSS技巧五条
重置默认样式:css reset
30个优秀CSS技术和实例
DIV+CSS网页布局及网站设计常犯错误
百度有啊商城CSS+XHTML实现的圆角
CSS技巧：子元素浮动后父容器的闭合
CSS2样式表中文chm手册
CSS3:文字阴影效果
CSS2.0 Chinese中文手册
css3.0中文手册
css兼容问题总结及常用技巧
CSS教程：清除浮动的方法大全 转
CSS 3 灵活的 Box Model