CSS 호버 내 HTML 설정이 유사하다

Question

노드, 유일한 차이점은 내 '.inner의 훨씬 더 깊은 포장되어

<div class="main"> 
    <div class="inner">aaa</div> 
    <div class="main anOtherClass"> 
     <div class="inner">aaa</div> 
    </div> 
</div> 

내 CSS는 다음과 같습니다

.main:hover .inner { 
    border: 1px solid #000; 
} 

첫 번째 .main에 마우스를 가져 가면 모든 .inners가 경계선에 도달한다는 문제가 있습니다. 내 목표는 첫 번째. 국경을 얻는 것뿐입니다. 이것은 CSS에서도 가능합니까?

Answer 1

사용 child selector : http://reference.sitepoint.com/css/childselector

당신이 만약 '

.main:hover > .inner { 
    border: 1px solid #000; 
} 

>는 .main의 직접 자녀 .inner 요소

SitePoint는 잘 설명이 선택을 제한 0 확실하다. 첫 번째를 원한다. (c 두 개 이상의 인접한 것들이 있습니다) :first-child도 사용하십시오 :

.main:hover > .inner:first-child { 
    border: 1px solid #000; 
}