CSS类选择器

Sa CSS, ang class selector ay ipinapakita ng isang tuldok (punto).

.center {text-align: center}

Sa pagkatapos na halimbawa, lahat ng HTML na elemento na may klase na center ay magiging center-aligned.

Sa ibabaw na halimbawa, lahat ng HTML na elemento na may klase na center ay magiging center-aligned.

<h1 class="center">
Ang paglikha na ito ay magiging center-aligned
</h1>
<p class="center">
Ang paragrapong ito ay magiging center-aligned din.
</p>

Pansin:Hindi puwedeng gamitin ang unang littersen ng pangalan ng klase bilang numero! Hindi ito magiging epektibo sa Mozilla o Firefox.

Kagaya ng id, maaaring gamitin din ang class bilang derived selector:

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

Sa pagkatapos na halimbawa na ito, ang mga table cell sa loob ng mas malaking elemento na may pangalan na fancy ay magpapakita ng dilaw na teksto sa batawang kulay luma (ang mas malaking elemento na may pangalan na fancy ay maaaring maging isang table o isang div).

元素也可以基于它们的类而被选择:

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

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

<td class="fancy">

你可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为fancy的类的单元格不会受这条规则的影响。还有一点值得注意,class为fancy的段落也不会是带有灰色背景的橙色,当然,任何其他被标注为fancy的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式,这个效果被限制于被标注为fancy的表格单元(即使用td元素来选择fancy类)。

相关内容

如果您需要更深入地学习关于类选择器的知识,请阅读 CodeW3C.com 的高级教程:CSS类选择器详解