Linux265CSS 选择器
如果要在HTML中设置CSS样式，指定这些样式生效的范围，具体生效的元素，那么我们需要使用选择器。CSS中最常见的选择器有元素选择器，ID选择器，class属性选择器等。
元素选择器
HTML文档中的标签元素最常见的 CSS 选择器是元素选择器。
元素选择器也称之为类型选择器，每个标签元素在HTML或者XML文档中会有多个实例存在，所以应用在该标签上的样式会对文档中所有实例生效。
例如 p、h1、em、a，或是 html 本身。
html {background-color:black;}
p {color:white;}
h1 {color:blue; }
em {color:silver;}
a {color:green;}
运行上面的实例后，你将会看到第一个<p>段落和第一个段落应用了同样的样式p{color:white}。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
使用ID选择器，可以精确控制样式的应用对象。
例如，下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#title {color:red;}
#content {color:green;}
实例代码如下：
<p id="title">这个标题是红色。</p>
<p id="content">这个内容是绿色。</p>
注意： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
基于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;
}
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
#sidebar p 只针对标记 id 为 sidebar 的元素内容中的 p 元素生效，而#sidebar h2只针对标记 id 为 sidebar 的元素内容中的 h2 元素生效。至于div#sidebar 则表示真针对id=sidebar的div原属生效。
类选择器
在 CSS 中，类选择器以一个点号显示，例如：
.center {text-align: center}
上例中，所有拥有 center 类的 HTML 元素内容均为居中。
下面 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
这里的内容将会居中显示。
</h1>
<p class="center">
该段落中的内容也将剧中排列显示。
</p>
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
和 id 一样，class 也可被用作派生选择器：
.table td {
color: #f60;
background: #666;
}
上例中，类名为 table 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 table 的更大的元素可能是一个表格或者一个 div）
元素也可以基于它们的类而被选择：
td.active {
color: #f60;
background: #666;
}
在上面的例子中，类名为 active 的表格单元将是带有灰色背景的橙色。
<td class="active">
那些以 active 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 active 的类的单元格不会受这条规则的影响。还有一点值得注意，class 为 active 的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 active 的表格单元（即使用 td 元素来选择 active 类）。
属性选择器
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]{
color:red;
}
属性和值选择器
下面的例子为 title="Linux265" 的所有元素设置样式：
[title=Linux265]{
border:5px solid blue;
}
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
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;
}
