CSS를 통해 컨텐츠를 대상으로하는 방법

Question

나는 을 편집 할 수 없습니다이 HTML이 :

<div id="menu"> 
<a href="">Home</a> &nbsp;|&nbsp; 
<a href="">Meet Our Physicians</a> &nbsp;|&nbsp; 
<a href="">Services</a> &nbsp;|&nbsp; 
</div> 

나는 그것이 반응 할 필요가 모바일에 내가 어떻게이 할 수  | 

을 삭제하고자 할 때 때를 나는 그것을 목표로 하는가? 뭔가 같이 :

@media screen and (max-width:480px){ 
element{ 
display:none; 
} 
} 

Answer 1

수있는 유일한 방법이 (불행히도, 요소의 일부가 아닌 텍스트를 타겟팅 할 수 없습니다 CSS)를 에뮬레이트하는 대상입니다 포함하는 요소는 다음 자손 <a> 요소에 스타일을 오버라이드 (override) :

@media screen and (max-width:480px){ 
    #menu { 
     font-size: 0; 
    } 
    #menu a { 
     font-size: 16px; /* or whatever */ 
     margin: 0 0.5em; /* or whatever, to restore some spacing between elements */ 
    } 
} 

Answer 2

편집 : 어쩌면 그런 일이 :

@media screen and (max-width:480px){ 
    #menu { 
     text-indent: -9999px; 
     font-size: 0px; 
    } 
    #menu a { 
     text-indent: 0px; 
     font-size: 14px; 
    } 
} 

Answer 3

을이 시도 :

를

@media screen and (max-width:480px) { 
    #menu > a{ 
     margin-right: -10px; /* getting the elements closer */ 
    } 
    #menu { 
     color: transparent; /* making the open text's color transparent */ 
    } 
} 

Working Fiddle