细说CSS样式选择符（二）

英文原文：http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/
中文翻译：http://www.dudo.org/article.asp?id=194
本文是关于CSS2.1选择符系列文章的第二部分。第一部分主要是讲关于类型选择符、类class选择符、id选择符、通配选择符和简单选择符的基础知识。
而在本部分中，我们主要讲一下选择符的高级应用，这不仅仅包括已经在主流浏览器中得到广泛支持的那些选择符。现在，浏览器对选择符的支持越来越完善，因此完全有必要拿出点时间来了解一下本文所介绍的所有选择符。

选择器
选择器用于将组成混合选择符的多个简单选择符分隔开来。CSS2.1中定义的选择器包括空格（任何数目的tab制表位、空格、具有空格性质的其他字符），大于号“>”和加号“+”。在现在的章节中我们将一一介绍这些选择器的使用。

后代选择符
后代选择符由两个或者多个简单选择符通过空格分隔而组成。他匹配第一个简单选择符对应元素的所有后代元素。例如，下面这条规则将会应用到是div后代的p元素上去：

1. div p { color:#f00; }

div p { color:#f00; }

任何形式的简单选择符都可以是后代选择符的组成部分。下面的例子中CSS规则将会应用到id是myid的div中的、li元素下的、类名为info的p元素中：

1. div#myid li p.info { color:#f00; }

div#myid li p.info { color:#f00; }

后代选择符可以使我们在不用指定id或者class的情况下选取目标元素，这有助于使文档中的标记更加简洁。假设我们有一个如下结构的导航菜单：

1. 
   
2. <ul id="nav">
3. <li><a href="#">Link 1a>li>
4. <li><a href="#">Link 2a>li>
5. <li><a href="#">Link 3a>li>
6. ul>
7. 
   

   
Link 1
   
Link 2
   
Link 3

要选取导航栏中的列表元素和超级链接，我们可以使用下面的CSS规则：

1. 
   
2. #nav li { display:inline; }
3. #nav a { font-weight:bold; }
4. 
   

#nav li { display:inline; }
#nav a { font-weight:bold; }

上面的规则不会应用到文档中的所有列表元素和链接中去。和一一给它们指定一个class相比，使用后代选择符会使你的文档清洁不少。

子选择符
子选择符用于择取指定元素的直接后代。子选择符由两个或者多个选择符通过大于号“>”分隔而成。父元素在“>”的左侧，在选择器“>”的两侧允许有空白存在。

下面的规则将会就用到所有div的子元素strong中去：

1. div > strong { color:#f00; }

div > strong { color:#f00; }

只有是div直接后代的strong元素才是这条规则的目标元素。如果文档中在div和strong元素中间有其他元素的话，这条规则就是无效的。下面的例子中只有“Text one”样式受上面规则的影响：

1. 
   
2. <div>
3. <strong>Text onestrong>
4. <p><strong>Text twostrong>p>
5. div>
6. 
   

   Text one
   
Text two

相邻的兄弟选择符
相邻的兄弟选择符由两个或者多个简单选择符通过加号“+”分隔而组成。加号两侧允许有空白存在。它匹配第一个元素的下一个兄弟元素，这两个元素必须具有相同的父元素，并且第一个元素和第二个元素在其前与其紧密相邻：

1. p + p { color:#f00 }

p + p { color:#f00 }

如果把上面这条规则应用到下面的例子中，那么“Paragraph two”样式受影响：

1. 
   
2. <div>
3. <p>Paragraph onep>
4. <p>Paragraph twop>
5. div>
6. 
   

   
Paragraph one
   
Paragraph two

分组
之所以在这里讲分组，是因为我发现在学习分组混合选择符的时候经常会有人出错。
如果利用几个不同的选择符对不同元素应用相同的样式时，就可以使用逗号“,”把它们分组而不用为每个选择符重复同样的规则了。这里最容易出现的错误就是选择符的不完整。假设我们有下面这么一段代码：

1. 
   
2. <div id="news">
3. <h3>Newsh3>
4. <ul>
5. <li>Item 1li>
6. <li>Item 2li>
7. ul>
8. div>
9. 
   

   
News
   

       
Item 1
       
Item 2
   

假设我们要给只有在id为news的div下的三级标题和列表元素应用相同的规则，那么下面这种写法就是错误的

1. 
   
2. div#news h3, ul {
3. margin:0 2em;
4. }
5. 
   

div#news h3, ul {
   margin:0 2em;
}

它会影响到div#news下的h3和ul元素，但是问题就在于它同样会影响到文档中所有ul元素，而不仅仅是div#news下的ul元素。

下面这种写法才是正确的分组选择符的写法：

1. 
   
2. div#news h3,
3. div#news ul {
4. margin:0, 2em;
5. }
6. 
   

div#news h3,
div#news ul {
   margin:0, 2em;
}

因此，在使用分组选择符时，一定要记住选择符书写完整。

属性选择符
属性选择符根据属性名称或者属性值来匹配元素。属性选择符有四种匹配模式：
[att]
匹配所有拥有att属性的元素，与属性值无关
[att=val]
匹配所有拥有att属性且属性值为val的元素
[att=~val]
匹配所有拥有att属性的元素且val是其属性值由空白分隔开的一个完整单词。在这各情况下val中间没有空白。
[att|=val]
匹配所有拥有att属性的元素，并且att的属性值是由连字符组成，val处于连字符的开始。它主要用于通过lang属性指定特定语言的情况中，例如：“en”、“en-us”，“en-gb”等等。

下面是一些例子。
匹配有title属性的p元素而不管它的值是多少：

1. p[title] { color:red; }

p[title] { color:red; }

下面的例子将匹配class属性等于error的div元素

1. div[class=error] { color:#f00; }

div[class=error] { color:#f00; }

要匹配headers属性中含有“col1”的td元素则可以使用下面的规则：

1. td[headers~=col1] {color:#f00}

td[headers~=col1] {color:#f00}

最后，下面的这条规则就匹配lang属性值中连字符前半部分以“eu”开始的p元素：

1. p[lang|=en] { color:#f00' }

p[lang|=en] { color:#f00' }

在同一个选择符中多个属性选择符可以同时使用。这样我们就可以用多个不同的属性值来区分相同的元素了。下面这个例子将会匹配到属性class值为quote且有cite属性（不管值是多少）的blockquote元素：

1. blocquote[class=quote][cite] { color:#f00; }

blocquote[class=quote][cite] { color:#f00; }

待续……

这一部分就是这些内容了。在最后的第三部分中，我主要想讲一下伪类和伪元素选择符。到这里你可以先回顾一下第一部分中的内容，重复是学习的好方法：）。