§ ITPOW >> 文档 >> CSS

CSS 规则中两个类连在一起是什么意思?

作者:vkvi 来源:ITPOW(原创) 日期:2009-8-23

比如:

.c1.c2
{
    text-decoration:underline;
}

选择器中 .c1 与 .c2 直接连在一起,中间无空格、无逗号,表示什么意思?看个例子:

<head>
<style type="text/css">
.c1
{
    color:#FF0000;
}
.c2
{
    font-style:italic;
}
.c1.c2
{
    text-decoration:underline;
}
</style>
</head>
 
<body>
<p class="c1">这里是红色</p>
<p class="c2">这里是斜体</p>
<p class="c1 c2">这里是红色、斜体、下划线</p>
</body>

结果已经通过文字直接描述出来了,原来 .c1.c2 表示如果一个标签中同时使用了这两个类(不论顺序、不论是否还有其他类),则响应此样式规则。

然而在 IE 中,第二个段落中除了有斜体还有下划线,说明它还把 .c1.c2 看作是 .c2。

于是,考虑到兼容性的原因,尽量不要使用 .c1.c2 这样的选择器。

相关文章