CSS选择器（中）——高级选择器续
本篇随笔将紧接着上一篇随笔内容，继续讨论CSS高级选择器。值得一提的是：虽然很多选择器是CSS3.0的新特性，但由于主流浏览器的支持性比较好，我并未做出严格区分和说明。
④通用样式（或者说通用选择器）。
顾名思义，通用样式是所有元素（当然，这里指标签）都能够使用的样式，而实际上它默认是被所有元素引用的。请看下面的例子：
1 <html> 2 <head> 3 <title> 通用选择器示例 </title> 4 <style> 5 *{color:red;background-color:blue} 6 </style> 7 </head> 8 9 <body> 10 测试文字 11 <h1>测试文字</h1> 12 </body> 13 </html>
意思就是：通用选择器里的样式是默认被所有标签引用。凡是有利就有弊，那么我们一般是用作微调。比如我们可能会在cs文件或网页内嵌样式中添加下列代码：
1 *{ 2 margin:0; 3 padding:0;}
内容一般就是这种。
⑤伪类。
1).锚伪类（以下内容大部分摘自W3CSchool）。
锚伪类是CSS1中就存在的伪类，主要有以下四个可设置样式：
1 a:link {color: #FF0000} /* 普通情况下的链接样式 */ 2 a:visited {color: #00FF00} /* 被访问过的链接样式 */ 3 a:hover {color: #FF00FF} /* 鼠标悬停上时链接样式 */ 4 a:active {color: #0000FF} /* 被选中时链接样式 */
使用过的朋友们都知道，这种样式是非常灵活的。除了颜色，还有下划线、鼠标形状等格式样式，您一定能使用以上伪类样式做出非常绚丽的效果。
以下是W3CSchool对于锚伪类的几点提示：
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类名称对大小写不敏感。
很简单，和其他样式一样，某些样式设置需要遵循一定的顺序规则。
2):first-child 伪类。
W3CSchool的原话为：“:first-child 伪类对另一个元素的第一个子元素进行匹配”。
这句话是什么意思呢？估计大家会误解，因为我开始也误解了。请看下面的例子：
1 <html> 2 <head> 3 <title> :first-child伪类示例 </title> 4 <style> 5 ul:first-child{color:red} 6 </style> 7 </head> 8 9 <body> 10 <ul> 11 <li> 12 测试1 13 </li> 14 </ul> 15 <ul> 16 <li> 17 测试2 18 </li> 19 </ul> 20 </body> 21 </html>
大家是不是认为ul下的第一个li就会默认引用我们设置的样式？实际上并非如此，:first-child是指作为第一个子元素而被赋予的样式。比如上面的例子，第一个ul作为body的第一个子元素而引用了我们设置的样式，第二个就没有。又如下面的例子：
1 <html> 2 <head> 3 <title> :first-child伪类示例 </title> 4 <style> 5 div > ul:first-child{color:red} 6 </style> 7 </head> 8 9 <body> 10 <ul> 11 <li> 12 测试1 13 </li> 14 </ul> 15 <div> 16 <ul> 17 <li> 18 测试2 19 </li> 20 </ul> 21 </div> 22 </body> 23 </html>
IE9没有效果……上面的例子证明了该伪类也可以和子选择器配合使用，当然，该伪类也可以在其他地方使用，比如特定匹配。请看下面的例子（摘自W3CSchool）。
在这个例子中，选择器将对 p 元素中的第一个子元素为 em 的元素进行匹配 - 并且将 p 元素中的第一个 em 元素设置为粗体：
1 <title> :first-child伪类示例 </title> 2 <style> 3 p em:first-child 4 { 5 font-weight:bold 6 } 7 </style> 8 </head> 9 10 <body> 11 <p>I am a <em>strong</em> man.</p> 12 </body> 13 </html>
有时候:first-child被写在p的后面，实际上是一样的，大家注意一下，另外IE9似乎不支持该伪类样式。
3):lang伪类。
首先我们要知道lang是元素的属性，意思是表示语言。比如“zh”、“zh-cn”、“us”、“us-en”。
使用方式如下：
1 <html> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 q:lang(no) 6 { 7 quotes: "~" "~" 8 } 9 p:lang(no){background-color:red} 10 </style> 11 12 </head> 13 14 <body> 15 <p lang="no">文字<q lang="no">段落中的引用的文字</q>文字</p> 16 </body> 17 </html>
当然，既然语言（lang）是一种属性，我们何不试试属性选择器呢？
1 <html> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 q[lang="no"] 6 { 7 quotes: "~" "~" 8 } 9 p[lang="no"]{background-color:red} 10 </style> 11 12 </head> 13 14 <body> 15 <p lang="no">文字<q lang="no">段落中的引用的文字</q>文字</p> 16 </body> 17 </html>
效果和上面的一样，当然IE9没戏。
那么我们是不是可以使用得更加高级一些呢？比如下面这样：
1 <html lang="zh"> 2 <head> 3 <title> 语言伪类示例 </title> 4 <style type="text/css"> 5 *[lang|="zh"]{background-color:red} 6 *[lang|="en"]{background-color:blue} 7 </style> 8 9 </head> 10 11 <body> 12 <div lang="en"> 13 <p>文字<q lang="zh-cn">段落中的引用的文字</q>文字</p> 14 </div> 15 </body> 16 </html>
这个例子要复杂一些，大家可以在火狐浏览器里观看效果。我先将网页语言设置为“zh”，默认地，它的子元素会继承它的属性，整个页面呈现出red背景色，而页面内有一个div有自己的语言，会呈现出设置的背景色，这个例子顺便复习了属性选择器。
:first-child伪类和:lang伪类是CSS2的新特性。
值得注意的是：在CSS2中，还新引入了:focus。大家可以自己看一下。
⑥伪元素。
1):first-line 伪元素。
"first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式。
我不做过多示例，不过有几点需要注意：
：first-line 伪元素仅能被用于块级元素。
下面的属性可以被应用到 first-line 伪元素。
- font 属性
- color 属性
- background 属性
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
2):first-letter 伪元素。
同上。
3):before和:after。
用于在某个元素之前或之后插入某些内容。如W3CSchool的举例：
1 h1:after 2 { 3 content: url(beep.wav) 4 }
1 h1:before 2 { 3 content: url(beep.wav) 4 }
以上例子将会在标题之前或之后播放音频。
:fisrt-line和:first-letter是CSS1就有，:before和:after是CSS2的新特性。
在CSS3中很多新的伪类被添加，也有很多选择器被添加新特性。他们是以下途图中所示：
我们在下一篇在进行探讨。
值得说明的是：我的IE9可能真的有问题……
2012-05-20 22:07:45
