ASP.NET 웹 양식의 CSS 선택자

Question

레이아웃 용 CSS 파일이있는 웹 양식 앱이 있습니다. ID를 사용하지 않고 CSS에서 수행하기가 훨씬 더 어려울 내 요소 중 하나는 가시성 서버 측을 제어하므로 runat="server"이어야합니다.

<div id="x"> 
    <div id="whatever" runat="server" visible="false"> 
     <div id="y"> 
      .... 
     </div> 
    </div> 
</div> 

내 문제는 CSS에서, 내 선택기와 그 whatever 사업부를 무시하는 방법을 몰라, 나는이 CSS를 인라인 및 클라이언트 제어 번역 서버에 넣어하지 않는 한, 내가 모르는 것입니다 컨트롤은 런타임까지 이름을 지정합니다.

#x 
{ 
    position:absolute; 
    height:30px; 
} 

    #x #whatever??? #y img 
    { 
     margin:-7px 15px 0 30px; 
    } 

    #x #whatever??? div 
    { 
     width:250px; 
     float:left; 
    } 
etc. 

어떻게 해결해야합니까? 출력을 렌더링하지 않지만 해당 내용의 가시성/렌더링을 제어하는 ​​데 사용할 수있는 서버 측 컨테이너 컨트롤이 있습니까? 아니면 해당 중간 div를 무시하는 트릭이 CSS에 있습니까?

이것은 마스터 페이지에 x div가 있고, whatever과 y div가 모두 페이지 자체에 있다는 사실 때문에 혼란 스럽습니다. MVC를 사용하는 경우 이것이 문제가되지 않을 것이라는 것을 알고 있지만이 시점에서 전환은 옵션이 아닙니다.

Answer 1

CSS 클래스 선택기를 사용하면 CSS ID 선택기만큼 빠르지는 않지만이 문제를 빠르고 쉽게 해결할 수 있지만 항상 작동합니다 (div 요소의 클라이언트 ID를 계산할 수는 있지만 예를 들어 Panel 컨트롤, 리피터 컨트롤 등으로 이동)

Answer 2

만약 당신의 예제가 맞는지 모르겠지만 뭔가를 선택할 때마다 전체 트리를 뚫고 지나가고있는 것처럼 보입니다. 이것은 CSS에 필요하지 않은, 다음은 트릭을 할 것입니다 :

직접 'x'를 선택

#x 
{ 
    position:absolute; 
    height:30px; 
} 

'Y'

#y img 
{ 
    margin:-7px 15px 0 30px; 
} 

의 하위 어떤 이미지

'x'의 자손 인 모든 div

#x div 
{ 
    width:250px; 
    float:left; 
} 

Here은 편리하고 이해하기 쉬운 선택기 설명입니다. 더 많이 또는 덜 필요한 것 하나만 잡고 어딘가에 here (내가 가장 좋아하는 테스트 사이트)과 같은 곳에서 테스트 해보십시오.

Answer 3

.net 4를 사용하는 경우 서버 측에서 지정한 동일한 ID가 필요한 블록에 ClientIDMode="Static"을 지정할 수 있습니다. 내가 클래스 선택기로 전환 한 시도

document.getElementById('<%= some_control.ClientID %>');