Question

我给元素添加类来设置它们的样式，一切都很好，但有一点不是。 .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; }

当我写这个东西时它起作用：.top-bar-section ul.left li.active {}但是它应该工作而不会把.left放在这里太对了？好吧，这不是

Answer 1

我确切地知道你经历的Tomas.R是什么，以及它归结为 CSS特异性。这是一种奇特的说法，即CSS选择器/规则越具体，它的影响就越大。由于.top-bar-section ul.left li.active有效，但.top-bar-section ul li.active并不是我的猜测，在基金会CSS的某处，有一个比.top-bar-section ul li.active更具体的选择器/规则。

确定Foundation的选择器/规则的具体方法的一个好方法是使用浏览器的开发工具，通常是F12，并查看要更改的元素/标签。如果您看到Foundation在指定CSS选择器/规则方面非常精细，那么您将需要执行相同的操作。

请记住，只要您与元素/标签“更接近”，就像在基金会的选择器/规则中一样具体，就像具体一样：

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

这样，您的site.css将更接近您的HTML，然后是Foundation的CSS。

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

最后，根据您计划进行自定义的程度，查看SASS可能是更好的策略。 Zurb带你去Getting Started With Sass，网上有很多很棒的教程，可以在离开的地方继续学习。

我希望有所帮助。

为基础5中的元素添加类

1 个答案: