class - 在基础 5 中为元素提供类以设置它们的样式

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 Specificity。这是一种奇特的说法，即 CSS 选择器/规则越具体，其影响就越大。由于 .top-bar-section ul.left li.active 有效，但 .top-bar-section ul li.active 我猜不是在 Foundation 的某个地方CSS 有一个比 .top-bar-section ul li.active 更具体的选择器/规则。

确定 Foundation 的选择器/规则的具体程度的一个好方法是使用浏览器的开发工具，通常是 F12，然后查看要更改的元素/标签。如果您发现 Foundation 在指定 CSS 选择器/规则方面非常精细，那么您将需要做同样的事情。

请记住，您不必像 Foundation 的选择器/规则那样更具体，只要您“更接近”元素/标签即可，如:

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

这样你的 site.css 将更接近你的 HTML 而不是 Foundation 的 CSS。

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

• > Specifics on CSS Specificity
• > CSS Specificity: Things You Should Know
• > Specificity

最后，根据您计划定制的程度，研究 SASS 可能是更好的策略。 . Zurb 让你去 Getting Started With Sass并且有很多很棒的在线教程可以从它离开的地方继续学习。

希望对您有所帮助。