需要更多澄清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>