是否可以为组合类设置 CSS？答案

【问题标题】：Is it possible to set CSS for combined classes?是否可以为组合类设置 CSS？
【发布时间】：2009-01-29 01:15:01
【问题描述】：

假设我有以下内容：

tr {
    background: #fff;
}

tr.even {
    background: #eee
}

tr.highlight {
    background: #fec;
}

是否可以指定第四个背景 (#fea) 而不是让highlight 简单地覆盖even？

<tr class="even highlight">
  <!-- ... -->
</tr>

一旦支持 CSS3，:nth-child 就可以工作。但是，在此期间有什么可用的吗？

tr { /* ... */ }

tr:nth-child(even) { /* ... */ }

tr.highlight { /* ... */ }

tr.highlight:nth-child(even) { /* ... */ }

【问题讨论】：

标签： css class

【解决方案1】：

你可以这样做：

tr.even.highlight { ... }

但 IE6 不知道。

【讨论】：

这是一篇关于 dylan 所谈论内容的非常详细的文章：ryanbrill.com/archives/multiple-classes-in-ie
我相信 IE6 会忽略除最后一个类名之外的所有内容，而不仅仅是整个定义。这可能会导致一些意外行为。

【解决方案2】：

分配多个类的关键是确保您的 CSS 在所有浏览器中都能正常降级。在这种情况下，这将是一个很好的解决方案：

tr.even.highlight { background:#fea }

在识别这一点的现代浏览器中，您将获得第 4 种颜色并将其应用于：

<tr class='even highlight'>
...
</tr>

我认为这甚至适用于 IE6。

【讨论】：

IE6 在那里看到了规则，但是它将它视为“tr.highlight”，而不是“tr.even.highlight”
是吗？我在我的网站上进行了快速测试：snaptortoise.com/css.html 并使用 IE NetRender (ipinfo.info/netrenderer) 对 IE 6 进行了查看。我认为它的行为方式与您描述的一样，但看起来它正在识别它。我是不是错过了什么？

【解决方案3】：

IE6 确实允许组合类，但它并没有按特定的优先级排序。我的意思是，如果您尝试在多个类中应用相同的样式属性，它将按照类在样式表中列出的顺序应用到元素，而不是按照应用类的层次结构。

例如，在这种情况下，文本将按预期显示 - 即第 2 段为蓝色文本：

<html>
    <head>
        <style type="text/css">
            .style1 {
                color:red
            }
            .style1.selected {
                color:blue
            }
        </style>
    </head>
    <body>
        <p class="style1">paragraph 1</p>
        <p class="style1 selected">paragraph 2</p>
    </body>
</html>

但是，如果将类的顺序交换一下，如下所示，第 1 段和第 2 段都是红色文本：

<html>
    <head>
        <style type="text/css">
            .style1.selected {
                color:blue
            }
            .style1 {
                color:red
            }
        </style>
    </head>
    <body>
        <p class="style1">paragraph 1</p>
        <p class="style1 selected">paragraph 2</p>
    </body>
</html>

所以组合的类被应用了，但是原始的简单类也是如此，这意味着元素匹配的最后一个类是它的样式，如果这些类应用了相同的属性。

因此，您可以通过对 css 类进行排序来使它们的行为符合您的预期。但这可能不适用于所有情况，具体取决于您希望如何应用这些类。在 IE6 中解决此问题的唯一可靠方法是使用 javascript 在特定事件上添加和删除 css 类，这有点笨拙。

【讨论】：