需要更多澄清CSS語法

Question

在CSS塊：

.navbar-custom .nav li a:hover{ 
    outline:none; 
    background-color: rgba(255,255,255,0.2); 
} 

這是否意味着：

「懸停效果適用於navbar-custom的子類nav列表元素的a標籤？」

如果沒有，請澄清。

Answer 1

是的，你正確地解釋它。選擇器之間的空間意味着該樣式將應用於匹配的父選擇器的任何後代。因此，對於.navbar-custom .nav li a:hover，任何錨元素是那些在nav類是在navbar-custom類元素會對應用上懸停時的特殊風格的後代元素的後代列表項的後代。

如果您使用的支架，而不是空間（即.navbar-custom > .nav > li > a:hover則樣式只適用於每個選擇的直接後裔，而不是任何後代。

Answer 2

.navbar定製.nav李一...是元素選擇。此選擇器將樣式應用於按順序列出的其他元素中的錨標記。

例如

<div class="navbar-custom"> 
    <ul class="nav"> 
    <li> 
     <a href="">link somewhere</a> 
    </li> 
    <li> 
     <a href="">link somewhere</a> 
    </li> 
    <li> 
     <a href="">link somewhere</a> 
    </li> 
    </ul> 
</div>