可以为组合类设置CSS吗？_Css_Class

可以为组合类设置CSS吗？

css class

可以为组合类设置CSS吗？,css,class,Css,Class,假设我有以下几点： tr{ 背景：#fff； } 平{ 背景：#eee } 突出{ 背景：#fec； } 是否可以指定第四个背景（#fea），而不是让高亮显示简单地覆盖甚至 <tr class="even highlight">  </tr> 您可以这样做： tr.even.highlight { ... } 但IE6并不知道。分配多个类的关键是确保CSS在所有浏览器中都能正常降级。在这种情况下，这将是一个很好的解决方案： t

假设我有以下几点：

tr{
背景：#fff；
}
平{
背景：#eee
}
突出{
背景：#fec；
}

是否可以指定第四个背景（

#fea

），而不是让

高亮显示

简单地覆盖

甚至

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

您可以这样做：

tr.even.highlight { ... }

但IE6并不知道。

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

tr.even.highlight { background:#fea }

在能够识别这一点的现代浏览器中，您将获得第四种颜色，它将应用于：

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

...

我认为这甚至可以在IE6中使用。

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>


.style1{
颜色：红色
}
.style1.selected{
颜色：蓝色
}
第1段
第2段

但是，如果类的顺序交换如下，则第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>


.style1.selected{
颜色：蓝色
}
.style1{
颜色：红色
}
第1段
第2段

因此应用了组合类，但也应用了原始简单类，这意味着元素匹配的最后一个类就是为其设置样式的类，如果这些类应用相同的属性

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

这里有一篇关于dylan所说内容的非常详细的文章：我相信IE6将忽略除最后一个类名以外的所有类，而不仅仅是整个定义。这可能会导致一些意外的行为。IE6在那里看到了规则，但它将其视为“tr.highlight”，而不是“tr.even.highlight”，是吗？我在我的网站上进行了一个快速测试：并使用IE6的IENetRender（）查看了它。我原以为它会像你描述的那样，但看起来它正在识别它。我是不是错过了什么？