CSS2多分类

Question

我有以下HTML：

<DIV class="foo bar"></DIV>

我正在尝试创建一个匹配所述元素的CSS类声明。通过specs on section 8.2.3，我想这应该可行：

DIV.foo.bar { border-color: black; }

但我已经在IE和Safari上测试过，两者都不会影响元素。任何技巧如何使这项工作？

Answer 1

这里有三个问题。

<强> 1。你的表达和HTML是否正确？

您的div没有边框宽度（根据您发布的内容），因此您可能无法获得边框。尝试：

<div class="foo bar"></div>

与

div.foo.bar { border: 1px solid black; }

<强> 2。你有没有高度？

你的div（基于你发布的内容）没有高度。现在在某些浏览器上，它们将呈现为边框粗细的实线。根据相邻元素和边框折叠设置（特别是在Firefox上，而不是IE / Safari），在某些情况下，该边框可能会消失。

第3。 IE6不能正确支持多个类选择器

多个类选择器在IE6中无法正常工作。请参阅multiple classes和browser support table。

通常这里的技巧是嵌套div：

<div class="foo"><div class="bar"></div></div>

然后当然：

div.foo div.bar { ... }

显然不是一回事，但你没有太多选择。另一种方法是手动组合类：

div.foo { background: red; }
div.bar { border: 1px solid black; }
div.foobar { background: red; border: 1px solid black; }

<div class="foobar"></div>

再次，远非理想。但是在IE6上只能做到这么多。

Answer 2

我认为这是因为您指定的是“border-color：black”而没有边框宽度或边框样式。尝试设置“border：solid 1px black”并查看是否有效。

Answer 3

IE6 doesn't support选择器在同一元素上有多个类。 IE-7.js脚本据说可以解决这个问题。

您的选择器在IE7 +和最新版本的Safari中应该可以正常工作。