jQuery를/자바 스크립트 - 특정 요소에 스타일을 제공

Question

가정하자 나는이 다음과 같이 3 페이지 :

페이지 1 :

<div id="content"> 
    <div id="red"></div> 
</div> 

2 페이지 :

<div id="content"> 
    <div id="blue"></div> 
</div> 

3 페이지 :

<div id="content"> 
    <div id="green"></div> 
</div> 

이 3 개의 페이지는 동일한 템플릿에 있습니다. 내가 추가 할 경우

#content { 
    margin-top: 10px; 
} 

모든 페이지는이 스타일을 적용합니다.이 스타일을 3 페이지에만 적용하려면 어떻게해야합니까?

일반적으로 요소를 가리 키기 위해 $('#content > #green').css(...)을 사용하지만, 반전 된 요소를 가리키고 어떤 스타일을 지정할 수 있습니까? $('#content < #green')과 같은 것을 사용할 수 있습니까?

Answer 1

당신은 사용할 수 있습니다

$('#green').parent('#content').css(...); 

Answer 2

또는 당신은 새로운 스타일의 클래스의 스타일을 보유하고 'contentClass'을 만들 수 있습니다

$('#green').parent().css(...); 

을 완전히 구체적하려는 경우, 당신은 할 수있다 id = "content"인 요소를 사용하여 스타일 클래스를 빨강, 녹색 및 파랑에 적용합니다. 이 방법으로 내용은 스타일이없는 추상 컨테이너가되고 실제 스타일은 원하는 위치로 이동합니다. 스타일 시트에 따라서

:

.contentClass { 
    /* Your content styles here /* 
} 

그리고 당신의 페이지에

:

<div id="content"> 
    <div id="red" class="contentClass"></div> 
</div> 

<div id="content"> 
    <div id="green" class="contentClass"></div> 
</div> 

<div id="content"> 
    <div id="blue" class="contentClass"></div> 
</div> 

Answer 3

당신이 $("#content eq(index of element)")를 시도 해 봤나?