使用 id 标记自定义导航栏不会执行任何操作

Customizing navbar using id tag doesnt do anything

本文关键字：执行 任何 操作 导航 id 自定义 使用      更新时间：2023-09-26

这是我尝试创建的自定义导航栏的CSS代码。 

#CustomNavBar{ 
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px; }
.dropdown-menu li:hover .sub-menu {
    visibility: visible; }
.dropdown:hover .dropdown-menu {
    display: block; }
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0; }
.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px; } .navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
        left: 10px; } 
}

当我在描述导航栏的同一 HTML 文件中使用 <style></style> 标签而不使用 #CustomNavBar id 属性时，它可以工作。

这是我的 HTML 代码片段：

<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Something</title>
     <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
     <link type="text/css" rel="stylesheet" href="/bmcfg/include/MainNavBar.css" />
  </head>
  <body> 

<nav class="navbar navbar-inverse" id="CustomNavBar">
    <div class="container-fluid">
        <div class="navbar-inner">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#MainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Hello</a>
        </div>
        <div class="collapse navbar-collapse " id="MainNavBar">

我无法弄清楚在使用id属性自定义导航栏时出错的地方？

您需要在每个 CSS 声明行上添加 id 选择器

#CustomNavBar .dropdown-menu .sub-menu { .. }
#CustomNavBar .dropdown-menu li:hover .sub-menu { .. }
#CustomNavBar .dropdown:hover .dropdown-menu { .. }

LESS 或 SASS 使嵌套分配更容易

您在使用 css 时使用的语法更少。不能在 css 中嵌套属性。如果要嵌套属性，则应使用较少的属性。

相反，你应该做这样的事情

#CustomNavBar .dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px; 
}

只有当您使用较少或 scss 时，才能进行嵌套。 

#CustomNavBar{
    .property1{
      ....
    }
}

你所有的选择器都嵌套在 #CustomNavBar 内。您需要使用 LESS 或 SASS，或者将 #CustomNavBar 选择器添加到所有选择器的前面。

相关文章：