CSS 选择器

如果要在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;
}

尝试一下

更多关于CSS选择器的详细介绍可以查看本站CSS参考手中的CSS选择器详细内容。