CSS2多分类

Question

我有以下HTML:

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

我正在尝试创建一个匹配所述元素的CSS类声明.通过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; }

你有高度吗？

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

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

多个类选择器在IE6中无法正常工作.查看多个类和浏览器支持表.

通常这里的技巧是嵌套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上你只能做很多事情.