征服高级CSS选择器
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;
}
或者你可以搞得更加复杂：页面的第一个段落的第一行字母显示为小写字母。
.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;
}
- ·09/291997年至2009年 中国电子商务十二年大事记
- ·09/29js中的文档模式-document.compatMode
- ·09/29轻松搞定IE的CSS制作网页技巧3则
- ·09/29Adobe Flash：腹背受敌与何去何从
- ·09/27网络时代下商品评价的重要性
- ·09/27轻松搞定IE的CSS制作网页技巧3则
- ·09/27卢松松：如何修改源码的网页模板？
- ·09/27名师讲堂之Kent Beck——响应式设计
- ·09/26分享英文音乐网站的经营经验
- ·09/2617个Joomla教程和模板网站