Question

以下CSS在Firefox下运行良好，但在IE浏览器下无效，为什么？另外，我如何只使用直接在父元素下的元素受CSS影响？

CSS：

.box{font:24px;}
.box>div{font:18px}
.box>div>div{font:12px;}

HTML：

<div class="box">
   level1
   <div>
      level2
      <div> level3</div>
      <div> level3</div>
   </div>
   <div>
      level2
      <div> level3</div>
      <div> level3</div>
   </div>
</div>

Answer 1

Internet Explorer从版本7开始支持子选择器（>），但仅在标准模式下支持。确保您使用的是a Doctype that triggers standards mode。

如果你的目标是IE6，那么你就不走运了。您需要依赖JS或使用后代选择器。

a>b { foo }

变为

a b { foo }
a * b { reverse-of-foo }

Answer 2

IE6完全不支持子选择器，IE7只支持部分选择器。

Quirksmode.org: Child selector

CSS Compatibility tables

遗憾的是，除了“解除”所有孙子孙女的定义外，没有办法做到这一点。

Answer 3

我对你要找的东西可能不对，但这就是我要解决你问题的方法：

.box {font:24px;}
.box div {font:18px}
.box div div {font:12px;}

这适用于你的例子，但请注意，如果你有另一个带有div的.box，它们也会受到影响。

CSS子选择器（＆gt;）不适用于IE

3 个答案: