Internet Explorer 8 中的 CSS 伪类

Question

这可能也适用于 IE7，但我不确定。我有以下 CSS:

div#sidebar-right a.menu-item img:nth-child(1),
div#sidebar-right a.menu-item > *:first-child {
    position: relative;
    left: 11px;
    top: 37px;
    z-index: 10;
    opacity: 0;

    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);

    -webkit-transition-property: top, opacity, -webkit-transform;
    -webkit-transition-duration: 0.2s, 0.3s, 0.5s;
    -webkit-transition-timing-function: linear, linear, ease-in;

    -moz-transition-property: top, opacity, -moz-transform;
    -moz-transition-duration: 0.2s, 0.3s, 0.5s;
    -moz-transition-timing-function: linear, linear, ease-in;
}

div#sidebar-right a.menu-item:hover img:nth-child(1),
div#sidebar-right a.menu-item:hover > *:first-child {
    top: -6px;
    opacity: 1;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}

div#sidebar-right a.menu-item img:nth-child(2),
div#sidebar-right a.menu-item > *:first-child + * {
    position: relative;
    z-index: 11;
    top: -63px;
}

div#sidebar-right a.menu-item.home-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.home-menu:hover > *:first-child + * {
    top: -100px;
}

div#sidebar-right a.menu-item.code-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.code-menu:hover > *:first-child + * {
    top: -97px;
}

div#sidebar-right a.menu-item.game-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.game-menu:hover > *:first-child + * {
    top: -101px;
}

div#sidebar-right a.menu-item.sports-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.sports-menu:hover > *:first-child + * {
    top: -98px;
}

div#sidebar-right a.menu-item.the-nation-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.the-nation-menu:hover > *:first-child + * {
    top: -98px;
}

出于某种原因，这个 CSS 根本没有在 IE8 中被拾取。我知道 IE8 不支持第 nth-child，但是 first-child 支持，并且这里也列为规则。有什么想法吗？真正令人费解的是，这条规则不仅没有被应用，它只是没有出现。如果您查看 CSS 选项卡下的 Developer Tools View ，您可以滚动浏览整个内容，但看不到其中的任何规则。非常困惑。

Answer 1

您似乎误解了选择器解析的工作原理。 IE8 看到形式为 something_invalid, something_valid 的选择器，这意味着它应该忽略整个选择器并且不应用属性。我再给你举个例子——假设你指定了像 div, p:foo-bar {/* properties */} 这样的选择器。即使 div 选择器完全有效，声明也会因为无法识别的伪类 foo-bar 而被丢弃。浏览器总是检查整个选择器是否有效；在选择器中使用逗号没有什么特别之处。

解决方案很简单 - 只需删除选择器的 nth-child 部分；您使用 first-child 的符号将匹配所有浏览器中的所需元素。