CSS 子选择器 (>) 不适用于 IE

Posted 2023-03-06

【中文标题】CSS 子选择器 (>) 不适用于 IE

【英文标题】：CSS child selector (>) doesn't work with IE

【发布时间】：2011-01-25 01:19:27

【问题描述】：

下面的CSS在firefox下很好用，在IE浏览器下不行，为什么？ 另外，我怎样才能使直接在父元素下的元素受 CSS 影响？

CSS：

.boxfont:24px;
.box>divfont:18px
.box>div>divfont: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>

【参考方案1】：

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

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

a>b  foo 

变成

a b  foo 
a * b  reverse-of-foo 

【讨论】：

抱歉复活了，但我对reverse-of-foo部分不知所措：P

@Baumr a b 规则将声明用于后代的属性； a * b 规则应声明覆盖上述规则的属性。

【参考方案2】：

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

Quirksmode.org: Child selector

CSS Compatibility tables

遗憾的是，除了“取消”所有孙辈的定义之外，没有其他方法可以做到这一点。

【参考方案3】：

我可能对您正在寻找的内容有误，但这是我将如何解决您的问题：

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

这对您来说可以正常工作，但是请注意，如果您有另一个带有 div 的 .box，它们也会受到影响。