Question

在我的文件较少的文件中，我有一个部分，我为导航定义了一些响应代码。

我想仅将此样式用于标题，否则它也会影响我的页脚。但是如果我将它包装在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>

Answer 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;
    }
}

Answer 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;
 }
}

LESS中是否存在标题标记中包含类的差异？

2 个答案: