使用导航栏中的 Role 属性覆盖默认 css

Question

我的页面中有 3 个导航栏。其中之一显示在上面给出的图像中。我在 css 中使用 role 属性覆盖导航栏颜色，就像这样

.navbar-default[role="transparent_navbar"] 
{

  background-color: white;
  border-color: white;

}

现在我还想覆盖 3 行菜单的边框和背景颜色（在给定图像中显示）。我试图通过编写这样的代码来实现这一点

.navbar-default navbar-toggle[role="transparent"] {
  border-color: red;
}
.navbar-default .navbar-toggle .icon-bar[role="transparent"] {
  background-color: red;
}

但它没有提供所需的功能。帮助我找到覆盖 3 行菜单设计的方法。

欢迎提出好点子！

Answer 1

我不确定你在问题中所说的“三行菜单设计”是什么意思，但这可能是你的解决方案：

.navbar-default .navbar-toggle[role="transparent"] {
  border-color: red;
}
.navbar-default .navbar-toggle[role="transparent"] .icon-bar {
  background-color: red;
}

Answer 2

哦，抱歉，我输错了一些 html，因此我遇到了错误。我的 css 代码工作正常！谢谢大家，对不起

使用导航栏中的 Role 属性覆盖默认 css

Override default css using Role attribute in navbar

html

css

navbar

twitter-bootstrap