Question

我有一个CMS生成的动态菜单，格式如下：

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#" class="btn btn-blue">Dashboard</a></li>
</ul>

这里是CSS：

.nav li {
    list-style: none;
    float: left;
    padding: 15px;
}
.nav a {
    color: #777;
    text-decoration: none;
}
.nav a:hover {
    color: green;
}
.btn-blue {
    border: 1px solid red;
    color: red;
    padding: 5px 20px;
    border-radius: 25px;
    background-color: #fff;
}
.btn-blue:hover {
    border: 1px solid red;
    color: white;
    background-color: red;
}

这里的问题是班级＆＃34; btn-blue＆＃34;不受尊重。 btn-blue的颜色代码似乎不起作用。我该如何解决这个问题？

这里是 JSFIDDLE DEMO

Answer 1

这是因为.nav a是.btn-blue更具体的选择器。请查看MDN article以获取更多有关特异性的信息

至于您的问题，只需将.btn-blue更改为.nav .btn-blue。

Answer 2

这一切都归结为特异性。试试这个，为你的css：

.nav li {
    list-style: none;
    float: left;
    padding: 15px;
}

.nav a {
    color: #777;
    text-decoration: none;
}

.nav a:hover {
    color: green;
}

.nav .btn-blue {
    border: 1px solid red;
    color: red;
    padding: 5px 20px;
    border-radius: 25px;
    background-color: #fff;
}

.nav .btn-blue:hover {
    border: 1px solid red;
    color: white;
    background-color: red;
}

如果您想了解更多相关信息，请参阅MDN上的帖子：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

使用类更改ul li中的字体颜色

2 个答案: