如何使用>操作符訪問較低的孩子？

Question

我的HTML代碼如下：

<div class="c1"> Heading 
<div> 
    <ul style="display:none"> 
     <li>Item1</li> 
     <li>Item1</li> 
    </ul> 
</div> 
</div> 

這是我的CSS：

.c1:hover > div ul 
{ 
    display:block; 
} 

如何訪問下級孩子 「 - >」 操作符？我基本上希望列表顯示在c1的懸停上。

Answer 1

您需要從標記中刪除內嵌樣式（style="display:none"） - 內聯樣式將覆蓋從樣式表加載的樣式。

相反，把這個在你的樣式表：

.c1 > div ul { 
    display:none; 
} 
.c1:hover > div ul { 
    display:block; 
} 

Answer 2

做到這一點 -

Demo

<div class="c1"> Heading 
<div> 
    <ul> 
     <li>Item1</li> 
     <li>Item1</li> 
    </ul> 
</div> 
</div> 

CSS

ul{ display: none; } 

.c1:hover div ul 
{ 
    display:block; 
}