這也可能適用於IE7,但我不確定。我有以下CSS:Internet Explorer 8中的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中不支持第n個孩子,但是第一個孩子在這裏也被列爲規則。有什麼想法嗎?真令人費解的是,這條規則不僅沒有被應用,反而只是沒有出現。如果您查看CSS選項卡下的開發人員工具視圖,則可以逐字滾動瀏覽整個內容,而不會看到其中的任何規則。很混亂。
':nth-child()'和':first-child'是僞類,而不是僞元素。 IE7不支持任何CSS2僞元素,但它支持一些CSS2僞類,比如':first-child'。這是一個微妙但重要的區別:) – BoltClock
感謝您的語法分析。我實際上知道這一點,但只是在寫這個主題的時候頭腦放鬆。 –