类选择器详解：使用.className选择匹配元素

类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在，这样才能选择类，如：

<liclass="activeimportantitems">2</li>

其中“active，important，items”就是以类给li加上一个类名，以便类选择器能正常工作，从而更好地将类选择器的样式与元素相关联。

.important{font-weight:bold;color:yellow;}

上面的代码表示给有important类名的元素加上一个“字体为粗体，颜色为黄色”的样式，如图2.8所示。

图2.8　类选择器使用实例

类选择器还可以结合元素选择器来使用，比如，文档中有好多个元素使用了类名“items”，但只想在p元素这个类名上修改样式，那么可以这样进行选择并加上相应的样式：

p.items{color:red;}

上面的代码只会匹配class属性包含items的所有p元素，但其他任何类型的元素都不匹配，包括有“items”这个类名的元素。“p.items”只会对应p元素并且其应有一个类名为“items”。不符合这两个条件的都不会被选择。

类选择器还可以具备多类名，如上所述，li元素中同时有两个或多个类名，将其以空格隔开，那么选择器也可以使用多类连接在一起，如：

.important{font-weight:bold;}(www.xing528.com)

.active{color:green;background:lime;}

.items{color:#fff;background:#000;}

.important.items{background:#ccc;}

.first.last{color:blue;}

正如上面的代码所示，＂.important.items＂这个选择器只在元素中同时包含＂important＂和＂items＂两个类时才起作用，如图2.9所示。

图2.9　类选择器的组合使用实例

有一点需要注意，如果一个多类选择器包含的类名中有一个不存在，那么这个选择器将无法找到匹配的元素，比如下面这句代码，它就无法到找相对应的元素标签，因为列表中只有一个li.first和一个li.last，不存在一个叫li.first.last的列表项：

.first.last{color:blue;}

提示：通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

所有浏览器都支持类选择器，但多类选择器（.className1.className2）不被IE6支持。