CSSホバーは、子供には適用されません

Question

私のHTMLの設定はこれに類似しているノード、唯一の違いは、私の」.inner年代をより深く包まれているということである

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

私のCSSがある（例えば<div><span><div class="inner">aaa</div></div></span>。）：

問題は、最初の.mainにマウスを置くと、すべての.innersが境界を取得するという問題です。私の目標は最初の.innerが国境を取得することだけです。これはcssでも可能ですか？

Answer 1

使用child selector：http://reference.sitepoint.com/css/childselector

あなたの場合」：

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

>は.mainの直接子です.inner要素、

SitePointはそれをうまく説明するに、このセレクタを制限しますあなたは確信していますのみが必要です（c 2つ以上の隣接するものがある場合）:first-childも使用してください：

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