logo标签列表

可以为组合类设置CSS吗？

cssclass
3

假设我有以下内容：

tr {
    background: #fff;
}

tr.even {
    background: #eee
}

tr.highlight {
    background: #fec;
}

在不覆盖even的前提下，是否可以指定第四个背景色(#fea)来代替highlight？

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

一旦支持CSS3，:nth-child可能会起作用。但是，在此期间是否有其他可用的方式？

tr { /* ... */ }

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

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

tr.highlight:nth-child(even) { /* ... */ }
3个回答
14
你可以这样做：
tr.even.highlight { ... }

尽管如此，IE6不支持此功能。

这是一篇关于Dylan所说的内容的相当详细的文章：http://www.ryanbrill.com/archives/multiple-classes-in-ie/ - Ólafur Waage
我相信IE6会忽略除最后一个类名之外的所有类名，而不仅仅是整个定义。这可能会导致一些意想不到的行为。 - Christopher Swasey
2

分配多个类的关键是确保您的CSS在所有浏览器中均能优雅地降级。 在这种情况下，以下是一个不错的解决方案：

tr.even.highlight { background:#fea }

在现代浏览器中，如果识别这个功能，你会得到第四种颜色，并且它将被应用于以下内容：

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

我认为这个甚至可以在IE6中运行。
IE6看到了这个规则，但是它将其视为"tr.highlight"而不是"tr.even.highlight"。 - Dan Herbert
它确实吗？我在我的网站上迅速测试了一下：http://snaptortoise.com/css.html然后使用IE NetRender（http://ipinfo.info/netrenderer/）在IE 6上查看了一下。我本以为它会按照你所描述的方式运行，但看起来它确实能识别它。我是不是漏掉了什么？ - George Mandis
0

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类，这有点笨拙。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接