20080426

译文:为元素使用多重CSS Class

Author:  WinkCategories:  XHTML/CSSComments Off

以前在编码中,我一般都为标签使用单一的class,最近在项目中,发现一个标签多重class的十分方便,很多时候可以避免class过多和代码重复。翻译拙劣,只是为了给自己留为参考。以下是正文。

CSS一个比较少为人知的窍门是,为元素赋予的class不仅限于一个。当需要为某元素赋予多个class时,只需在属性中将这些class以空格分隔。例如:

<p class="pullquote btmmargin left">...</p>

这行代码为段落标签设置了三个class:

  • pullquote
  • btmmargin
  • left

可以像往常一样在CSS中定义它们:

.pullquote { ... }
.btmmargin { ... }
p.left { ... }

如果为某特定元素设置了一个class(译注:例如p.left),你仍可以将其作为class列表的一部分。不过需要了解的是,该样式仅会对在CSS中指定的元素起作用(译注:例如.left之于p)。

多重class的优点

多重class使元素添加特殊效果更为方便,无需编写一个全新的样式来实现。比如在我们需要让元素左右浮动,可以先写两个样式,名为“left”和“right”,仅分别定义它们为“float: left;”和“float: right;”。然后在需要某元素左浮动时,只需将“left”这个class添加到该元素的样式列表中即可。

我喜欢在整站都基本一致的地方使用多重class。例如,如果我经常需要设置元素的bottom-margin10px,只需要创建一个仅包含“botom-margin: 10px;”定义的class,然后在需要实现这个效果的地方添加这个class就可以了。

多重class的缺点

虽然主流浏览器都支持多重class,不过一些过时的浏览器并不支持。所以需要保证元素class列表中的第一个class包含绝大部分主要样式效果。

当为一个元素使用了过多的多重class时,也会把人弄糊涂。

关于多重样式的一些浏览器兼容性测试,参见“MultipleClasses at css-discuss”。

 

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.

Back to Page Top