CSS教程

CSS 类选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

以上示例定义了HTML文档中拥有“center”类的所有 HTML 元素均为居中。

在下面的 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>

注意： 1.类名的第一个字符不能使用数字！它仅在Internet Explorer浏览器中起作用。 2.如果你想要指定的样式是特定的HTML元素，而不是所有的HTML元素，则可以在.classname前面加上此HTML标记，如p.center。

也就是说，如果你想在文档中有两种不同样式的段落，如一个右对齐，一个居中，可以这样定义CSS文件：

p.right {text-align:right}
p.center {text-align:center}

然后在您的HTML文档中使用这两种类属性：

<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>

注意：如果你要给指定的HTML元素指定两种类，它的语法如下：

<p class="center bold">This is a paragraph.</p>

这个段落将由“center”类和“bold”类共同指定样式。

和id选择器一样，class 类选择器也可以被用作派生选择器：

.fancy td {
	color: #f60;
	background: #666;
	}

在上面这个例子中，类名为 fancy 的HTML元素内部的表格单元都会以灰色背景显示橙色文字（类名为 fancy 的HTML元素可能是一个表格或者一个div）。

其实这和上面提到的p.center是一样的。

td.fancy {
	color: #f60;
	background: #666;
	}

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

<td class="fancy">...  </td>

你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。这里定义的CSS样式效果仅限制用于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。