原文：http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/
#CSS 2.1 选择器，第二部分
这是介绍CSS2.1中可用选择器的三篇系列文章中的第二篇。第一篇更多的是关于基础的东西，比如类型选择器（type selectors），类选择器和id选择器，通配选择器（universal selector），和简单选择器。
在这篇文章中我将会近距离的介绍并没有被所有的主流浏览器完全支持（译者注：目前主流浏览器对以下介绍的选择器已经都支持，详见quirksmode）的更高级的选择器。这些支持正一步一步的变好，所以是值得花时间学习这篇中介绍的选择器的。
##组合因子（Combinators）
组合因子是用来分隔一个组合选择器（combined selector）中的两个或者多个简单选择器的。可用的组合因子是空白（任意数量的tab，空格或者其他空白字符），>，和+。每个组合因子都是做什么的将会在接下来的几个部分进行介绍。
##后代选择器（Descendant selectors）
一个后代选择器是由两个或者更多个的简单选择器以空格进行分隔所组成的。这个选择器会匹配第一个简单选择器所匹配元素的后代元素。举个例子，下面规则中的选择器将会匹配div元素后代中的所有p元素：
div p { color:#f00; }
组成后代选择器的每个选择器可以是任何形式的简单选择器。下面规则中的选择器匹配了所有拥有info类名的p元素，其又被一个li元素包含，li元素又被一个id为myid的div元素所包含。
div#myid li p.info { color:#f00; }
后代选择器允许你在不需要提供一个类名或者一个id的情况下去定位元素，这相应的帮你保持你标记的简洁。让我们假设你有一个以下面标记组成的导航列表：
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
为了只定位导航列表中的列表项目和链接，你可能使用以下CSS：
#nav li { display:inline; }
#nav a { font-weight:bold; }
这些规则将不会匹配文档中的任何其他列表项目或者链接。把这个做法跟给每个列表和链接添加一个类名对比一下，你将会认识到当你使用后代选择器的时候你的标记能变得有多整洁。
##子选择器
一个子选择器可以定位一个特定元素的直接子元素。一个子选择器由两个或者多个以大于号“>”分隔的选择器组成。父元素位于“>”的左侧，同时组合因子周围的空白是允许的。
这个规则将会影响一个div元素的所有strong子元素：
div > strong { color:#f00; }
只有是div元素直接后代的strong元素才能被这个规则所定位。如果在文档树中的div和strong元素之间存在任何其他元素，这个选择器将不会匹配。在下面的例子中，只有“Text one”会被以上规则所影响：
<div>
<strong>Text one</strong>
<p><strong>Text two</strong></p>
</div>
##相邻兄弟选择器
一个相邻兄弟选择器是由两个以加号“＋”分隔的简单选择器所组成。相邻兄弟之间的组合因子周围的空白是被允许的。这个选择器会匹配第一个元素的紧接着的兄弟元素。这些元素必须有同样的父元素，并且第一个元素必须直接位于第二个元素之前：
p + p { color:#f00; }
如果应用在以下例子中，上面的规则将会只影响“Paragraph two”：
<div>
<p>Paragraph one</p>
<p>Paragraph two</p>
</div>
##分组
我决定在这个时候提一下分组，因为我发现当人们在学习CSS的时候常犯的一个错误是和对组合选择器进行分组相关的。
为了能够把相同的规则应用在一些不同选择器所匹配的元素上，你可以把它们分到一个以逗号分隔的列表组中，而不是为每个选择器都重复声明一遍。常犯的错误是没有列出完整的选择器。假设你有如下的标记：
<div id="news">
<h3>News</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
现在，假设你想对第三级标题（h3）和无序列表（ul）应用同样长的margin，但是只有当它们位于id为“news”的div元素之中的时候。这是错误的方法：
div#news h3, ul {
margin:0 2em;
}
这将会对div#news中的h3和ul元素都产生影响。问题是它将会把文档中所有的ul元素做为目标元素，而不仅仅是div#news中的。
这是这个例子中对选择器进行分组的正确方法：
div#news h3,
div#news ul {
margin:0 2em;
}
所以，当对选择器进行分组的时候，记住要对每个选择器进行完整指定。
##属性选择器
属性选择器是基于属性存在与否或者属性的值来进行元素匹配的。一个属性选择器有四种方法进行匹配：
[att]
匹配拥有一个att属性的元素，不管属性值是什么。
[att=val]
匹配拥有一个值为“val”的att属性的元素。
[att~=val]
匹配其att属性值是一个以空格分隔的列表，并且列表中包含“val”值的元素。在这个情况下“val”不能包含空格。
[att|=val]
匹配att属性值是一个以“val”开始的以中划线（-）分隔的列表的元素。这个选择器主要用来匹配lang属性（XHTML中的xml:lang）指定的语言子码，比如“en”，“en-us”，“en-gb”，等等。
看一些例子。下面规则中的选择器匹配了所有拥有title属性的p元素，而不管属性值是什么：
p[title] { color:#f00; }
在下面的例子中，选择器匹配了class属性值为error的所有div元素：
div[class=error] { color:#f00; }
为了匹配所有headers属性值包含“col1”的td元素，下面的选择器可以被使用：
td[headers~=col1] { color:#f00; }
最后，下面例子中的选择器会匹配所有lang属性以en开始的p元素：
p[lang|=en] { color:#f00; }
多属性选择器可以在同样的选择器中使用。这使得匹配相同元素的一些不同属性成为可能。下面的规则将会应用到所有class属性值为“quote”，并且拥有一个cite属性（不管其值为什么）的blockquote元素：
blockquote[class=quote][cite] { color:#f00; }
##待续
到了第二篇文章的结尾处了。在第三篇文章中，即这个系列最后的部分，我将会介绍伪类和伪元素选择器。当你在等第三篇的时候，你可以重新看一下第一篇文章。复习对学习是有益的。
(完)