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:hover .inner { 
    border: 1px solid #000; 
} 

問題是，如果我將鼠標懸停在第一個.main上，所有的.inners都會獲得邊框。我的目標只是讓第一個.inner獲得邊界。這甚至有可能在CSS中做？

Answer 1

使用child selector：

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

的>此選擇限制到.inner元素是直接孩子.main，

SitePoint解釋說得好：http://reference.sitepoint.com/css/childselector

如果」確定你只有想要第一個（在c有兩個或更多個相鄰的）使用:first-child以及：

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