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에서 전혀 선택되지 않았다. 나는 n 번째 아이가 IE8에서 지원되지 않는다는 것을 이해합니다. 그러나 첫 번째 아이는 여기에 규칙으로 기재되어 있습니다. 이견있는 사람? 정말로 수수께끼 같은 것은 규칙이 적용되지 않고 단지 나타나지 않는다는 것입니다. CSS 탭 아래에서 개발자 도구보기를 살펴보면 말 그대로 전체 내용을 스크롤 할 수 있으며 거기에는 이러한 규칙이 표시되지 않습니다. 매우 혼란 스럽습니다.

Answer 1

a.menu-item.home-menu:hover > *:first-child + *의 시도. IE8은 양식이 something_invalid, something_valid 인 선택기를 보게됩니다. 이는 선택기 전체를 ​​무시하고 속성을 적용하지 말아야한다는 것을 의미합니다. 또 다른 예를 드리겠습니다. div, p:foo-bar { /* properties */ }과 같은 셀렉터를 지정했다고 상상해보십시오. div 선택기가 완전히 유효하더라도 인식 할 수없는 가상 클록 foo-bar으로 인해 선언이 삭제됩니다. 브라우저는 항상 선택자가 유효한지 확인합니다. 셀렉터에서 쉼표를 사용할 때는 특별한 것이 없습니다.

해결 방법은 간단합니다. 셀렉터의 일부분 인 nth-child 만 제거하면됩니다. first-child의 표기법은 모든 브라우저에서 원하는 요소와 일치합니다.

Answer 2

는 a.menu-item.home-menu:hover * 대신 선택의 작품을 분석하는 방법 오해 것 같다