Question

我有两个页面，其中引导程序导航菜单颜色与其余页面不同（总共三个不同的设置）。
导航菜单是一个html文件（链接到每个页面）我想在ONE css文件上拥有所有代码。请问我该怎么做？谢谢。以下是代码示例：

    .navbar-default {
    background-color: #65625B;
    background-color: transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000)";
    zoom: 1; 
    background-color: rgba(255, 255, 255, 0.0) !important;
    border-color: transparent;
    border-color: #65625B;
    border-color: rgba(255, 255, 255, 0.0) !important;
    font-size: 12px;
}

@media(max-width:767px){
.navbar-default {
    background-color: #65625B !important;
    border-color: #65625B !important;
}
}

/* 3-bar button color */
.navbar-toggle {
    background-color: #65625B !important;
}

/* 3-bar button hover */
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #83817b !important;
}

/* 3-bar button border */
.navbar-default .navbar-toggle {
    border-color: #65625B !important;
}

Answer 1

假设每个页面都有自己的主体，请为需要不同颜色的页面指定唯一ID。

<body id="my-blue-navigation">

然后在CSS中引用正确的类。

#my-blue-navigation .navbar-default {
  background-color: blue;
}

nav {
width: 100%;
height: 100px;
}

.navbar-default {
background-color: red;
}

#my-blue-navigation .navbar-default {
background-color: blue;
}

<body id="my-blue-navigation">
<nav class="navbar-default">
</nav>
</body>

如何在一个css文件上有三种不同的引导菜单颜色？

1 个答案: