Question

说我有以下内容：

tr {
    background: #fff;
}

tr.even {
    background: #eee
}

tr.highlight {
    background: #fec;
}

是否可以指定第4个背景（#fea）而不是highlight只是覆盖even？

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

支持CSS3后，:nth-child可能会有效。但是，在此期间有什么可用的吗？

tr { /* ... */ }

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

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

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

Answer 1

你可以这样做：

tr.even.highlight { ... }

虽然IE6不知道。

Answer 2

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

tr.even.highlight { background:#fea }

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

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

我认为这甚至适用于IE6。

Answer 3

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

例如，在这种情况下，文本将按预期显示 - 即第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类，这有点笨拙。

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

3 个答案: