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,但是第一个孩子在这里也被列为规则.有什么想法吗？令人费解的是,该规则不仅没有得到应用,而且还没有出现.如果您查看CSS选项卡下的"开发人员工具"视图,您可以直接滚动整个内容,而不会在其中看到任何这些规则.很混乱.

Answer 1

您似乎误解了选择器解析的工作原理.IE8看到表单的选择器,something_invalid, something_valid这意味着它应该忽略整个选择器而不应用属性.我给你另一个例子 - 假设你指定了选择器div, p:foo-bar { /* properties */ }.即使div选择器完全有效,由于无法识别的伪类,也会删除声明foo-bar.浏览器总是检查整个选择器是否有效; 在选择器中使用逗号时没有什么特别之处.

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