Question

这是一个链接，可以将您带到其中一个在线代码编辑器，以便您可以使用正确的代码向我发送更新的链接。

我遇到的问题是，除了“活动”页面呈红色外，它的边框底部也需要是红色的。其余的边框底部需要是绿色的。

我尝试使用

实现这一目标

.customnav .nav > li {
    color: blue;
    margin: 12px 15px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.active {
    color: #ff4e50;
    border-bottom: 2px solid #ff4e50;
    line-height: 20px;
}

但这不起作用。它使所有的边框底部变灰。请指教，请检查jsfiddle链接并更新其中的代码并将更新的链接发送给我。你可以在那里看到完整的HTML和CSS！

Answer 1

Here ，这有效。

.customnav .nav > li {
    color: blue;
    margin: 12px 15px;
    border-bottom: 2px solid green;
}

.customnav .nav li.active {
    color: #ff4e50;
    border-bottom: 2px solid #ff4e50 !important;
    line-height: 20px;
}

它不起作用的原因是，border-bottom: 2px solid rgba(0, 0, 0, 0.1);表示它是黑色，不透明度为10％;

.active不能单独让你的边界变红的原因是css依赖优先权。并且在css中，.customnav .nav li.active将比同一元素上的.active更优先，甚至li.active

Answer 2

您的.active选择器不如.customnav .nav > li精确，这意味着.active选择器会被另一个（.customnav .nav > li）覆盖。

可能的解决方案：

.customnav .nav > li.active {
    color: #ff4e50;
    border-bottom: 2px solid #ff4e50;
    line-height: 20px;
}

或将!important添加到该媒体资源中：

.active {
    color: #ff4e50;
    border-bottom: 2px solid #ff4e50 !important;
    line-height: 20px;
}

Answer 3

添加此

.customnav .nav > li.active {
    border-bottom: 2px solid #ff4e50;
}

修复边框底部菜单

3 个答案: