CSS（二）选择器
类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
在CSS 中，类选择器以一个点号显示，下例所有拥有center类的 HTML元素均为居中。
.center {text-align:center}
在下面的HTML代码中，h1和p元素都有center 类。这意味着两者都将遵守".center"选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p >
注意：类名的第一个字符不能使用数字！它无法在Mozilla或Firefox 中起作用。
和id一样，class 也可被用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}
在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为fancy的更大的元素可能是一个表格或者一个div)
元素也可以基于它们的类而被选择：
td.fancy {
color: #f60;
background: #666;
}
在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。
<td class="fancy">
你可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为fancy的类的单元格不会受这条规则的影响。还有一点值得注意，class为fancy的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为fancy的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元(即使用td元素来选择fancy类)。
修改 HTML代码
在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。为了将类选择器的样式与元素关联，必须将class指定为一个适当的值。请看下面的HTML代码：
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p >
在上面的代码中，两个元素的class 都指定为important：第一个标题(h1元素)，第二个段落(p元素)。
语法
然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号(.)，然后结合通配选择器：
*.important {color:red;}
如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：
.important {color:red;}
<html>
<head>
<style type="text/css">
.important {color:red;}
</style>
</head>
<body>
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p >
<p>This is a paragraph.</p >
<p>This is a paragraph.</p >
<p>This is a paragraph.</p >
<p>...</p >
</body>
</html>
结合元素选择器
类选择器可以结合元素选择器来使用。例如，您可能希望只有段落显示为红色文本：
p.important {color:red;}
选择器现在会匹配class 属性包含important的所有p元素，但是其他任何类型的元素都不匹配，不论是否有此class属性。选择器p.important解释为：“其 class 属性值为important的所有段落”。因为h1元素不是段落，这个规则的选择器与之不匹配，因此h1元素不会变成红色文本。如果你确实希望为h1元素指定不同的样式，可以使用选择器 h1.important:
<html>
<head>
<style type="text/css">
p.important {color:red;}
h1.important {color:blue;}
</style>
</head>
<body>
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p >
<p>This is a paragraph.</p >
<p>This is a paragraph.</p >
<p>This is a paragraph.</p >
<p>...</p >
</body>
</html>
CSS 多类选择器
在上一节中，我们处理了class值中包含一个词的情况。在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-style:italic;}
.important.warning {background:silver;}
<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
</head>
<body>
<p class="important">This paragraph is very important.</p >
<p class="warning">This is a warning.</p >
<p class="important warning">This paragraph is a very important warning.</p >
<p>This is a paragraph.</p >
<p>...</p >
</body>
</html>
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素(类名的顺序不限)。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：.important.urgent {background:silver;}
不出所料，这个选择器将只匹配class属性中包含词 important和urgent的p元素。因此，如果一个p元素的 class 属性中只有词 important和 warning，将不能匹配。不过，它能匹配以下元素：
<p class="important urgent warning">
This paragraph is a very important and urgent
</p >
<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
</head>
<body>
<p class="important">This paragraph is very important.</p >
<p class="warning">This is a warning.</p >
<p class="important urgent warning">This paragraph is a very important warning.</p >
<p>This is a paragraph.</p >
<p>...</p >
</body>
</html>
id选择器
id 选择器可以为标有特定id的 HTML 元素指定特定的样式。id选择器以“#"来定义。下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的 HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。
<p id="red">这个段落是红色。</p >
<p id="green">这个段落是绿色。</p>
注意：id属性只能在每个 HTML文档中出现一次。
派生选择器
在现代布局中，id选择器常常用于建立派生选择器。
#sidebar p{
font-style: italic;
text-align: right;
margin-top:0.5em;
}
上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是div或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如<em></em>或者<span></span>，不过这样的用法是非法的，因为不可以在内联元素<span>中嵌入<p>
即使被标注为 sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次：
#sidebar p{
font-style: italic;
text-align: right;
margin-top:0.5em;
}
#sidebar h2{
font-size:1em;
font-weight:normal;
font-style:italic;
margin:0;
line-height:1.5;
text-align: right;
}
在这里，与页面中的其他p元素明显不同的是，sidebar内的p元素得到了特殊的处理，同时，与页面中其他所有h2元素明显不同的是，sidebar中的h2元素也得到了不同的特殊处理。
单独的选择器
id选择器即使不被用来创建派生选择器，它也可以独立发挥作用：
#sidebar {
border:1px dotted #000;
padding:10px;
}
根据这条规则，id为sidebar的元素将拥有一个像素宽的黑色点状边框，同时其周围会有10个像素宽的内边距(padding，内部空白)。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：
div#sidebar{
border:1px dotted #000;
padding:10px;
}
属性选择器
对带有指定属性的HTML元素设置样式。可以为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性。只有在规定了！DOCTYPE时，IE7和IE8才支持属性选择器。在IE6及更低的版本中，不支持属性选择。
属性选择器。下面的例子为带有title 属性的所有元素设置样式：
<!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">
[title] {
color: red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="baidu" href=" ">baidu</a>
<hr />
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http:/www.baidu.com.cn">baidu</a>
</body>
</html>
属性和值选择器
下面的例子为title="baidu"的所有元素设置样式：
[title=baidu]{
border:5px solid blue;
}
<!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">
[title=baidu] {
border: 5px solid blue;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<img title="baidu"
src="http://n.sinaimg.cn/news/1_img/vcg/2b0c102b/25/w1024h601/20190316/xOKg-hukwxnu2710036.jpg" />
<br/>
<a title="baidu" href=" ">baidu</ a>
<hr/>
<h1>无法应用样式：</h1>
<p title="greeting">Hi!</p >
<a class="baidu" href="http://www.baidu.com">baidu</a>
</body>
</html>
属性和值选择器-多个值
下面的例子为包含指定值的title属性的所有元素设置样式。
适用于由空格分隔的属性值：
<!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">
[title~=hello]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello baidu students!</h1>
<hr />
<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello baidu students!</p >
</body>
</html>
下面的例子为带有包含指定值的lang属性的所有元素设置样式。
适用于由连字符分隔的属性值：
<!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">
[lang|=en] {
color: red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p >
<p lang="en-us">Hi!</p >
<hr />
<h1>无法应用样式：</h1>
<p lang="us">Hi!</p >
<p lang="zh">Hao!</p >
</body>
</html>
设置表单的样式
属性选择器在为不带有class 或id的表单设置样式时特别有用：
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
font-family: Verdana, Arial;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20"> <input
type="text" name="Name" value="Gates" size="20"> <input
type="button" value="Example Button">
</form>
</body>
</html>
派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。
比方说，你希望列表中的strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}
请注意标记为<strong>的蓝色代码的上下文关系：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p >
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。再看看下面的CSS 规则：
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
下面是它施加影响的HTML：
<p>The strongly emphasized word in this paragraph is <strong>red</strong>.</p >
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is <strong>blue</strong>.</h2>
元素选择器
最常见的CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置HTML的样式，选择器通常将是某个HTML元素，比如p、h1、em、a，甚至可以是html本身：
html {color:black;}
h1 {color:.blue;}
h2 {color:silver;}
<html>
<head>
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p >
</body>
</html>
可以将某个样式从一个元素切换到另一个元素。假设您决定将上面的段落文本(而不是h1元素)设置为灰色。只需要把h1选择器改为p:
html {color:black;}
p {color:gray;}
h2 {color:silver;}
类型选择器
在W3C标准中，元素选择器又称为类型选择器(type selector)。“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”下面的规则匹配文档树中所有h1元素：
h1 {font-family:sans-serif;}
因此，我们也可以为XML文档中的元素设置样式：XML 文档：
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
CSS 文档：
note
{
font-family:Verdana, Arial;
margin-left:30px;
}
to
{
font-size:28px;
display: block;
}
from
{
font-size:28px;
display: block;
}
heading
{
color: red;
font-size:60px;
display: block;
}
body
{
color: blue;
font-size:35px;
display: block;
}