导航栏项目的文本颜色不反映自定义的CSS。

11 浏览
0 Comments

导航栏项目的文本颜色不反映自定义的CSS。

我的导航栏文本颜色没有改变。我想我是在使用默认的导航栏。我对Bootstrap非常陌生，我在互联网上搜索了一些方法，但似乎没有什么可行的。\n/* 导航栏 */\n.menu-bar {\n 背景颜色: #101010;\n}\n* {\n 字体家族: \'Poppins\', sans-serif;\n}\n.nav-link {\n 字体大小: 24像素;\n 颜色: #FFFFFF;\n}\n\n\n\n\n

\n

\n
\n

\n

\n\n我知道在颜色(.nav-link)前面写上important可以使我的代码生效，但我在一篇文章中读到这样做不是一个好习惯。我试着看网上的教程，但对我来说不起作用（尽管对他们来说起作用）。

0

2 答案

0 Comments

问题的原因是导航栏项目的文本颜色没有反映自定义的CSS样式。导致这个问题的原因是在CSS中使用了ID选择器，而不是类选择器。ID选择器只能用于唯一的元素，而且不可重用，需要更多的标记。解决方法是将ID选择器更改为类选择器。这样做的好处是类选择器可以重用，并且会被优先应用。以下是解决方法的代码示例：

 
.myId .menu-bar{
    background-color: #101010;
}
.myId .nav-link{
    font-size: 24px;
    color: #FFFFFF;
}

通过将ID选择器改为类选择器，可以解决导航栏项目文本颜色不反映自定义CSS样式的问题。使用类选择器可以更好地重用样式，并且会被优先应用。

0
0 Comments

问题：导航栏项目的文本颜色不反映自定义的CSS。

原因：Bootstrap中使用了比你的选择器更具体的选择器“.navbar-light .navbar-nav .nav-link”来应用样式。在CSS中，将应用最具体的选择器。

解决方法：尝试将选择器“.nav-link”更改为“.navbar-light .navbar-nav .nav-link”：

.navbar-light .navbar-nav .nav-link{
    font-size: 24px;
    color: #FFFFFF;
}

你可以复制问题帖子中的代码片段并将解决方案应用于它。虽然我不确定它是否有效，但这是正确的方法。

更多关于CSS特异性的信息：https://www.w3schools.com/css/css_specificity.asp

0