html - 类中类，ie6中的错误

Question

我正在编写 HTML/css 代码并且在 IE6 中有一个特定的错误。

我想创建可变的 div，使用类:

例如(这只是例子，不是真正的元素代码)

.top {width: 50px;}
.top.selected {background: #f00;}
.mid {width: 114px;}
.mid.selected {background: #0f0;}
.bot {width: 100px;}
.bot.selected {background: #0ff; color: #f00;}
...etc...

所以，html 将像:

<div class='top selected'>1</div>
<div class='mid'>2</div>
<div class='bot selected'>3</div>

这对程序员来说很棒，但在 IE6 中不起作用:(

只有 .topselected {background: #f00;} // <div class='top topselected'>，但它确实是肮脏的代码......也许有些黑客？

Answer 1

似乎去这里的方法是创建更多的语义类名，然后像这样将它们分开:

.highlighted { background: #0f0; }
.wide { width: 114px; }
/* etc... */

然后您拥有的 html 将运行良好，IMO，更易于维护。