html - 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 有高度吗？

您的 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 上您能做的只有这么多。