img : first-of-type은 모든 이미지를 선택합니다.

Question

내 페이지에 두 개의 이미지가 있습니다. 사용자가 터치 장치를 사용하여 웹 사이트를 방문하거나 Javascript를 지원하지 않을 때 Modernizr을 사용하여 웹 사이트를 방문하여 첫 번째 웹 사이트를 표시하고 싶습니다.

메뉴 버튼, 페이지의 상단에 :

<img src="menubutton.png" alt="Menubutton"> 

기사에 사용 된 단지 이미지 다른 이미지 :

내 CSS에서

<img src="image.jpg" alt="Image"> 

, 나는이있다 :

.no-touch img:first-of-type, .no-js img:first-of-type { 
    display:none; 
} 

이제 거의 정상적으로 작동합니다. 이미지는 내 랩톱에는 표시되지 않지만 내 iPad에는 표시됩니다. 하지만 두 번째 이미지는 내 랩톱에 표시되지 않습니다. 그러나, 그 두 번째 이미지는 내 iPad에 표시되고있다. 또한 ID를 사용하여 첫 번째 이미지를 대상으로 지정하면 원하는 방식으로 작동하지만 실제로 필요하지 않으면 ID를 사용할 수 없습니다. 여기 무슨 일 이니?

Answer 1

첫 번째 유형 선택자는 매우 제한적으로 지원합니다. 또한 전체 요소가 아닌 상위 요소 내에서 첫 번째 유형이 될 것이므로 문제가 될 수 있습니다.