Question

我已经设置了一个自定义导航栏，当我滚动浏览网站时，会滑动当前nav，这会轻微占据屏幕的大部分。

CSS和JS的示例摘录如下

/*CSS*/
#topnav {
    top: 100px;
    background-color:white;
    border-top-style:solid;
}

.topActive {
    z-index:5000;
    width:3cm;
    background-color:black;
    border-style:solid;
    border-right-style:none;
    color:white;
}

/*JS*/
if(nav == 0) {
    $("#topnav").addClass("topActive topnavb");
    ...

在这个例子中，我希望当导航栏中的导航标签滑出时，它的背景颜色是黑色;但是，在这种情况下，背景颜色仍为白色。基本上class不会覆盖id

中的属性

感谢您解决此问题的任何帮助

Answer 1

这是因为CSS specificity。从链接：

以下选择器类型列表是通过提高特异性来实现的：


类型选择器（例如，h1）和伪元素（例如：之前）。

类选择器（例如.example），属性选择器（例如，[type =“radio”]）和伪类（例如：hover）。

ID选择器（例如，＃example）。

因此ID将始终覆盖class。

Answer 2

一个类的css特异性低于id的css特异性。这会导致id规则覆盖类规则。

https://css-tricks.com/specifics-on-css-specificity/

Answer 3

在阅读了其他答案一直在讨论的ApplicationSignInManager之后，我找到了一个可以添加到该行末尾的命令。这是specificity。尽管!important通常被视为不良做法，但请参阅here了解有关使用!important的做法的更多信息，在这种情况下，它不被视为不良做法。这是因为它覆盖了一个属性，在本网站的任何进一步使用样式表中都没有改变。

Answer 4

浏览器将选择更精确规则中定义的属性。 Id选择器比类选择器更精确。您应该使用col-lg-6代替#topnav.topActive

JavaScript和CSS类没有按预期运行

4 个答案: