Question

我一直依赖以下技术。但我经常没遇到它，我无法找到它的信息。也许它有一个我不知道的正确名称？我把它称为链接，因为它似乎正是这样：将CSS类名称链接在一起。但是在链接上进行搜索会在大多数情况下产生关于jQuery的信息。

.button {
   background-color:#ccc;
}
/* This is what I'm unsure of, notice there is no space between .button and .on */
/* If there were, .on apply to the child of .button, but that's not my intention */
.button.on { 
   background-color:#fff;
}

它允许我使用单个类名（on）来区分多个元素的状态。

<a class="button"></a>
<a class="button on"></a>
<a class="button-two"></a>
<a class="button-two on"></a>
<!-- etc... -->

当您需要使用单个类名在多个元素上切换on类时，动态页面非常方便。

但它有效吗？

Answer 1

这是完全有效的CSS .... 虽然IE6 /和IE7在类链方面确实存在一些问题。

Answer 2

是的，它是有效的CSS，虽然它在IE6中不能正常工作 - 它只会应用最后一个类，而不是所有类。您可以read more over at CSS-Tricks.com了解相关主题。

Answer 3

这是完全有效且非常普遍的。

您可以在此页面中看到它：

a.comment-user.owner {
    padding: 2px 5px;
}

但是，IE6会忽略除最后一节课以外的所有课程在IE6中，.a.b相当于.b。

以这种方式链接CSS类是否有效？

3 个答案: