Selectutorial: 类选择器

类选择器

介绍
合并类和元素选择器
合并多种类
类不应该取代HTML元素
减少类的个数
使用类前的思考

介绍

元素选择器会选取每一个元素的实例，而类选择器将会选择任何一个带有特定class属性的HTML元素，并且不考虑其在文档树中的位置。

例如，如果您希望指向第一段第一个列表项是他突出显示，那您应该在页面中做如下标记：


		<body>


		<p class="big">This is some <em>text</em></p>

		<p>This is some text</p>

		<ul>


		<li class="big">List item</li>

		<li>List item</li>

		<li>List <em>item</em></li>


		</ul>

		</body>

树形表为：

document tree diagram showing classes

规则可以这样定义：


		.big { font-size: 110%; font-weight: bold; }

合并类和元素选择器

如果您想使它更加与众不同，您可以将类选择器和元素选择器一起使用。任何一个元素选择器都可以使用。


		div.big { color: blue; }

		td.big { color: yellow; }


		label.big { color: green; }

		form.big { color: red; }

例如，您或许想让第一段和第一个列表项的字体变得更大一些。你或许也希望同时仅让第一段的字体变粗。

document tree diagram showing different uses of classes

为了实现上面的效果，您可以这样定义规则：


		.big { font-size: 110%; } /* affects p and li */

		p.big { font-weight: bold; }/* affects p only */

合并多种类

有的时候类选择器经常被用到是因为同一个HTML元素可以被定义为许多种类名。例如您可能希望这样为同一个特定元素定义两条规则：


		<p class="big indent">


		

		.big { font-weight: bold; }

		.indent { padding-left: 2em; }

类不应该取代HTML元素

正如您看到的，类选择器的功能非常强大。但是，我们不建议您为不相干的元素使用相关的类名。

举个例子，下面的<div>元素或者<p>内的元素看起来像是一个“标题”。


		<div class="heading">Heading here</div>


		

		.heading 

		{ 

		font-weight: bold; 

		font-size: 140%; 

		color: #600;


		}

上面的例子的问题是有些浏览器可能不能识别样式表或者在浏览页面的时候将样式表功能关闭了。这样您在<div>或者<p>中的内容看上去不想一个“标题”。从结构上来说，您应该尽可能地使用正确的HTML元素并且根据您的需要设置相应的样式。

一种比较完美的方法是：


		<h2>Heading here</h2>

		

		h2 

		{ 

		font-weight: bold; /* should not really be required */


		font-size: 140%; 

		color: #600;

		}

或者如果您需要在您的页面中一块区域里设置一个特定的标题样式：


		<h2 class="sidenav">Heading here</h2>


		

		h2.sidenav 

		{ 

		font-weight: bold; 

		font-size: 140%; 

		color: #600;


		}

减少类的个数

类选择器也可以重复使用。例如，您可能需要为某个<div>元素内的一大批元素设置样式。所有位于<div>元素内的元素都可以通过为<div>元素定义类名类设置。您应该试着避免像以下这种无谓的标记：


		<div class="sidenav">

		<h2 class="sideheading">Site navigation></h2>

		<ul class="sidelist">

		<li class="sideitem">List item</li>


		<li class="sideitem"><a href="#"><span class="sidelink">List item</span></a></li>

		<li class="sideitem">List item</li>


		</ul>

		</div>

取而代之，您可以通过如下的方法进行标记，实现相同的效果：



		<div class="sidenav">

		<h2>Site navigation</h2>

		<ul>

		<li>List item</li>


		<li><a href="#">List item</a></li>

		<li>List item</li>

		</ul>

		</div>

在某个地方使用了类，您就可以指向该<div>元素内部的任何一个元素。下面的例子将类选择器和元素选择器合并使用。这样它们就变成了后代选择器。


		div.sidenav { blah } /* styles overall div */


		div.sidenav h2 { blah } /* styles h2 within the div */

		div.sidenav ul { blah } /* styles ul within the div */

		div.sidenav li { blah }  /* styles li within the div */

		div.sidenav li a { blah } /* styles a within li within the div */

使用类前的思考

在使用类选择器之前，您需要思考：

是否可以用一个已经存在的HTML元素取而代之？
该元素在文档树的上层元素是否定义了类或者ID可以使用？

类选择器对于标准兼容浏览器支持得很好。

Selectutorial - CSS 选择器