LESS 在标题标签中包含类有区别吗？答案

【问题标题】：Is there a difference in LESS to include classes inside header tag?LESS 在标题标签中包含类有区别吗？
【发布时间】：2017-06-01 07:13:12
【问题描述】：

在我的 less-file 中，我有一个部分为我的导航定义了一些响应式代码。

我只想将这种样式用于页眉，否则它也会影响我的页脚。但是，如果我将其包装在 header 中，我的网站不会显示样式导航。这不起作用：

header {
    .content {
        padding-top: 80px;
    }

    li.expanded.dropdown {
        float: none !important;
    }

    .navbar-nav {
        float: right !important;
        background: #b4b48e;
        width: 160px;
        margin: 0px -15px;
    }

    .navbar-default .navbar-nav > li > a {
        color: white;
    }
}

但这有效：

.content {
    padding-top: 80px;
}

li.expanded.dropdown {
    float: none !important;
}

.navbar-nav {
    float: right !important;
    background: #b4b48e;
    width: 160px;
    margin: 0px -15px;
}

.navbar-default .navbar-nav > li > a {
    color: white;
}

我错过了什么？

已编译的非工作版本的 CSS，包括 HTML：

header .content {
    padding-top: 80px;
}
header li.expanded.dropdown {
    float: none !important;
}
header .navbar-nav {
    float: right !important;
    background: #b4b48e;
    width: 160px;
    margin: 0px -15px;
}
header .navbar-default .navbar-nav > li > a {
    color: white;
}

<header class="navbar navbar-default container" id="navbar" role="banner">
  <div class="navbar-header">
    <a class="logo navbar-btn pull-left" href="/startseite" title="">
      <img class="img-responsive" src="" alt="">
    </a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
  </div>
  <div class="navbar-collapse collapse">
    <div class="region region-navigation-collapsible">
      <nav role="navigation" aria-labelledby="block-bootstrap-custom-main-menu-menu" id="block-bootstrap-custom-main-menu" class="contextual-region">
        <ul class="menu nav navbar-nav">
          <li>some navigation</li>
          <li>there are more items here</li>
        </ul>
      </nav>
    </div>
  </div>
</header>

【问题讨论】：

应该是.header？ header 是 CSS 类还是 HTML 元素？
content 类的标签在哪里？它不是标题的一部分，所以当您在开头添加标题时显然不会工作
另外你的 navbar-default 类是标题标签本身的一部分，所以也不会工作
@CalvT 这解决了它。必须在标题后面包含 navbar-default。多谢。我像蝙蝠一样失明。如果你想写一个我会接受的。

标签： css twitter-bootstrap less

【解决方案1】：

您的 CSS 将 navbar-default 类显示为标题的子元素，而实际上它是标题本身的一个类。因此，通过将您的 CSS 更改为以下内容，它应该可以工作。

header.navbar-default {
    .content {
        padding-top: 80px;
    }

    li.expanded.dropdown {
        float: none !important;
    }

    .navbar-nav {
        float: right !important;
        background: #b4b48e;
        width: 160px;
        margin: 0px -15px;
    }

    .navbar-nav > li > a {
        color:white;
    }
}

【讨论】：

【解决方案2】：

所以你在下面寻找（更像是）这个，但正如评论的那样，你的标记根本不“匹配”你的 css。

header.navbar-default {

li.expanded.dropdown {
  float: none !important;
}

.navbar-nav {
   padding-top: 80px;
   float: right !important;
   background: #b4b48e;
   width: 160px;
   margin: 0px -15px;
}

 .navbar-nav > li > a {
   color:white;
 }
}

【讨论】：