Class 在基础5中给元素授课以使其风格化

我将类赋予元素以对其进行样式化，这一切都是好的，但有一点是不好的。.active不起作用。它应该改变颜色。我的代码怎么了

   <nav class="top-bar">
     <ul class="title-area">
       <li class="name"><h1><a href="#">Queen</a></h1></li>  
     </ul>
   <section class="top-bar-section">                
    <ul class="left">           
     <li class="divider"> </li>   
     <li class="active"> <a href="#">Menu Item 1</a></li>
     <li class="divider"> </li> 
     <li><a href="#">Menu Item 2</a></li>
   </ul>
   </section>
   </nav>

.top-bar-section ul li:hover > a {
    background: #272727;
    color: white; }
.top-bar-section ul li.active > a {
    background: yellow;
    color: white; }
.top-bar-section ul li.active > a:hover {
      background: #0078a0; }

.顶杆部分ul li：悬停>a{
背景:#2727；
颜色：白色；}
.顶杆截面ul li.active>a{
背景：黄色；
颜色：白色；}
.顶杆部分ul li.active>a:悬停{
背景：#0078a0；}

---

当我写这个东西的时候它就工作了：。顶栏部分ul.left li.active{}但是，嘿，它应该可以工作，而不需要放置。左这里也是右吗？嗯，这不是

我确切地知道你经历了什么，归结起来是CSS特异性。这是一种奇特的说法，CSS选择器/规则越具体，其影响就越大。由于

.top bar section ul.left li.active

起作用，但

.top bar section ul li.active

不起作用，我猜想基金会的CSS中有一个选择器/规则比

.top bar section ul.active

更具体

确定Foundation选择器/规则的具体程度的一个好方法是使用浏览器的开发工具，通常是F12，并查看要更改的元素/标记。如果在指定CSS选择器/规则时，基金会是非常颗粒状的，那么您将需要这样做。 请记住，您不必像Foundation的选择器/规则那样更加具体，只要您“更接近”元素/标记，如中所示：

    <link rel="stylesheet" href="css/foundation.min.css" />`
    <link rel="stylesheet" href="css/site.css" />

`

这样，你的

站点.css将比基金会的css更接近你的HTML

要更好地了解CSS特性，请查看以下链接：






最后，根据您计划定制多少，这可能是一个更好的策略。Zurb让你开始学习，网上有很多很棒的教程，可以从中学习到它的不足之处

我希望这能有所帮助。
女士们先生们，答案应该是这样的。谢谢，亚当。