CSS（3）选择器
在各种类型的样式定义中，内联样式是在元素的style属性中指定，因此不需要定义样式选择器。除此而外，其它类型的样式表都需要定义样式选择器（selector）。选择器就是指定所定义的样式适合于哪些元素，比如应用于p标签、class="important"。样式选择器主要有标签选择器、class选择器和id选择器等，下面分别进行详细学习。
一、元素选择器
最常见的 CSS 选择器是元素选择器（element selector），也叫类型选择器（type selector）。换句话说，文档的元素（或类型）就是最基本的选择器。这里的“文档”既可以是HTML文档，也可以是XML文档。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
/*元素选择器*/ html {color:black;} h1 {color:blue;} h2 {color:silver;}
参考：http://www.w3school.com.cn/css/css_selector_type.asp
二、CSS分组
CSS分组中包括选择器分组（selector grouping）和声明分组（declaration selector）。
1.选择器分组
使用选择器分组，可以同时为多个标签设定一个样式，实现样式复用。比如希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}
说明：以上样式定义将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。在选择器分组中，逗号很重要，如果没有这个逗号，那么规则的含义将完全不同（变为后代选择器）。
可以将任意多个选择器分组在一起，对此没有任何限制。例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
选择器分组的优点：通过分组，可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表，还可以提高网页的加载速度。以下是一个选择器没有分组和分组的比较：两组规则能得到同样的结果，不过可以很清楚地看出分组之后的写起来更容易：
/* 分组之前 */ h1 {color:blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;} /* 分组之后*/ h1, h2, h3, h4, h5, h6 {color:blue;}
2.通配符选择器（universal selector）
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），通配符选择器显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。例如，下面的规则可以使文档中的每个元素都为红色：
* {color:red;}
说明：上面这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。
3.声明分组
和选择器分组类似，我们也可以对声明分组。比如希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式：
h1 {font: 28px Verdana;} h1 {color: blue;} h1 {background: red;}
但是，上面这种做法的效率很低。尤其是上面这种情况，当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，我们可以将声明分组在一起：
h1 {font: 28px Verdana; color: white; background: black;}
这一行代码与前面的 3 行样式表的效果完全相同。
注意：对声明分组，一定要在各个声明的最后使用分号，这一点很重要。浏览器会忽略样式表中的空白符。只要加了分号，就如我上一篇CSS语法中介绍的一样，就可以采用在一行只写一条声明的样式书写方式，从而提高样式表的可读性。
h1 { font: 28px Verdana; color: blue; background: red; }
4.选择器分组和声明分组的结合
我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。在实际工作中经量采用这种结合的方式定义样式表。
下面的规则为所有标题指定了一种复杂的样式：将所有标题的样式定义为带有白色背景的灰色文本，其内边距是 10 像素，并带有 1 像素的实心边框，文本字体是 Verdana。
h1, h2, h3, h4, h5, h6 { color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana; }
参考：http://www.w3school.com.cn/css/css_selector_grouping.asp
三、属性选择器
CSS 2 引入了属性选择器（property selector）。属性选择器可以根据元素的属性（property）和属性值（value）以及它们的组合来选择元素。
1.简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。比如把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
与上面类似，可以限定进一步精确到元素类型，只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，可以将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色：
a[href][title] {color:red;}
另一个有用的例子，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：这个特例更适合用来诊断而不是设计，即通过alt属性诊断图像的有效性，从而为图像设置边框。
img[alt] {border: 5px solid red;}
2.根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素，比如只选择href属性为特定url的<a></a>标签。这是一种完全值匹配的方式。例如，将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
和简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。这样当每个属性-值都满足条件时，HTML元素才会被选中。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
3.根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。比如要选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~="important"] {color: red;}
说明：上面的选择器会选择class属性中只要包含了important的元素，而不管class中是否包含其它的值。但是，如果忽略了波浪号，则说明需要完成完全值匹配。
4.子串匹配属性选择器
介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。
很多现代浏览器都支持这些选择器，包括 IE7。任何属性都可以使用这些选择器。下面是对这些选择器的简单总结：
[abc^="def"]：选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]：选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]：选择 abc 属性值中包含子串 "def" 的所有元素
可以想到，这些选择有很多用途。举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：
a[href*="w3school.com.cn"] {color: red;}
说明：以上CSS定义中会选择所有href属性中包含"w3school.com.cn"的<a></a>标签。
5.特定属性选择器
特定属性选择器是利用某些元素的某些特殊属性来选择元素的。比如以下规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
*[lang|="en"] {color: red;}
摘自：http://www.w3school.com.cn/css/css_selector_attribute.asp
四、类选择器
1.基本语法
CSS 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。提示：只有将文档元素的class属性的值设置为类选择器的名字之后，才能使用类选择器。
应用场景：要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
语法：类选择器定义的类名前有一个点号（.），然后结合通配选择器。比如定义一个类名为important的类选择器，声明的内容为前景色是红色。
*.important {color:red;}
如果只需要选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：
.important {color:red;}
2.结合元素选择器
类选择器可以结合元素选择器来使用，从而限定类选择器的适用范围。例如，可以定义一个类名为"important"的CSS，作用是设置只有段落显示为红色文本：
p.important {color:red;}
说明：选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。
3.CSS 多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
<p class="important warning"> This paragraph is a very important warning. </p>
这两个词的顺序无关紧要，写成 warning important 也可以。假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：
.important {font-weight:bold;} .warning {font-weight:italic;} .important.warning {background:silver;}
注意：通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。如果样式表中的定义有重复，则以匹配的最后一个类名中的定义为准。
摘自：http://www.w3school.com.cn/css/css_selector_class.asp
五、ID选择器
1.语法
与类选择器相似，ID 选择器也允许以一种独立于文档元素的方式来指定样式。在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。
ID选择器的定义：ID 选择器在元素ID属性前面有一个井号（ #）。请看下面的例子：
先定义一个指定id属性值为"intro"的段落：
<p id="intro">This is a paragraph of introduction.</p>
然后再使用"intro"这个ID属性值作为选择器定义CSS样式表：
*#intro {font-weight:bold;}
与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：
#intro {font-weight:bold;}
这两个选择器的效果将是一样的。
2.ID选择器与类选择器的区别
第一，ID选择器只能在同一个文档中使用一次。与类选择器不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
第二，不能使用 ID 词列表。不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
3.区分大小写
请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。因此，对于以下的 CSS 和 HTML，元素不会变成粗体：
#intro {font-weight:bold;}
<p id="Intro">This is a paragraph of introduction.</p>
由于字母 i 的大小写不同，所以选择器不会匹配上面的元素。
摘自：http://www.w3school.com.cn/css/css_selector_id.asp
六、后代选择器
后代选择器（descendant selector）又称为包含选择器，后代选择器可以选择作为某元素后代的元素。
1.语法
后代选择器是根据上下文选择元素的。在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。后代选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：
<h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p>
根据后代选择器的语法，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。因此，ul em 将会选择以下标记中的所有 em 元素：
<ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item 1-4</li> </ol> </li> <li>List item 2</li> <li>List item 3</li> </ul
2.后代选择器的具体应用
后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：
div.sidebar {background:blue;} div.maincontent {background:white;} div.sidebar a:link {color:white;} div.maincontent a:link {color:blue;}
摘自：http://www.w3school.com.cn/css/css_selector_descendant.asp
七、子元素选择器
与后代选择器（descendant selector）相比，子元素选择器（Child selector）只能选择作为某元素子元素的元素。如果不想选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，则需要用子元素选择器（Child selector）。
例如，如果选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：
<h1>This is <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
语法：子选择器的父元素和子元素之间使用大于号（子结合符）。子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：
h1 > strong
h1> strong
h1 >strong
h1>strong
如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
摘自：http://www.w3school.com.cn/css/css_selector_child.asp
八、相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
语法：相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。与子结合符一样，相邻兄弟结合符旁边可以有空白符。用一个结合符只能选择两个相邻兄弟中的第二个元素。
请看下面这个文档树片段：
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div>
结合上面的这段HTML文档，请看下面的选择器：
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
说明： 在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
摘自：http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp
九、伪类
CSS 伪类(Pseudo-classes)用于向某些选择器添加特殊的效果。
伪类的语法：
selector : pseudo-class {property: value}
1.锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态（active），已被访问状态（visited），未被访问状态（link），和鼠标悬停状态（hover）。
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
语法提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；a:active 必须被置于 a:hover 之后，才是有效的；伪类名称对大小写不敏感。
2.伪类与 CSS 类
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的链接被访问过，那么它将显示为红色。
3.CSS2 - :first-child 伪类
可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素，而实际上p：first-child伪类会选择某个父元素下的第一个p元素，它是“子”而不是“父”。考虑以下标记：
1 <div> 2 <p> 3 These are the necessary steps:</p> 4 <ul> 5 <li>Intert Key</li> 6 <li>Turn key <strong>clockwise</strong></li> 7 <li>Push accelerator</li> 8 </ul> 9 <p> 10 Do <em>not</em> push the brake at the same time as the accelerator.</p> 11 </div>
在上面的例子中，作为第一个子元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
给定以下规则：
p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
说明：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
4.CSS2 - :lang 伪类
:lang 伪类使我们有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：
<html> <head> <style type="text/css"> q:lang(no) { quotes: "~" "~" } </style> </head> <body> <p>文字<q lang="no">段落中的引用的文字</q>文字</p> </body></html>
摘自：http://www.w3school.com.cn/css/css_pseudo_classes.asp
十、伪元素
和伪类类似，CSS 伪元素也是用于向某些选择器设置特殊效果。
伪元素的语法：
selector:pseudo-element {property:value;}
1.:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。"first-line" 伪元素只能用于块级元素。在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：
p:first-line { color:#ff0000; font-variant:small-caps; }
2.:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式。"first-letter" 伪元素只能用于块级元素。
p:first-letter { color:#ff0000; font-size:xx-large; }
3.多重伪元素
可以结合多个伪元素来使用。在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：
p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }
4.伪元素和 CSS 类
伪元素可以与 CSS 类配合使用。下面的例子会使所有 class 为 article 的段落的首字母变为红色。
p.article:first-letter { color: #FF0000; }
<p class="article">This is a paragraph in an article。</p>
5.CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。下面的例子在每个 <h1> 元素前面插入一幅图片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> h1:before {content:url(/i/w3school_logo_white.gif)} </style> </head> <body> <h1>This is a heading</h1> <p>The :before pseudo-element inserts content before an element.</p> <h1>This is a heading</h1> <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。 </body> </html>
6.CSS2 - :after 伪元素
:after" 伪元素可以在元素的内容之后插入新内容。下面的例子在每个 <h1> 元素后面插入一幅图片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> h1:after {content:url(/i/w3school_logo_white.gif)} </style> </head> <body> <h1>This is a heading</h1> <p>The :before pseudo-element inserts content before an element.</p> <h1>This is a heading</h1> <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。 </body> </html>
摘自：http://www.w3school.com.cn/css/css_pseudo_elements.asp
