html - 使用 CSS 在 `LI` 项上设置选择颜色和选择指示器

Question

在http://jsfiddle.net/BZKMD/

我正在尝试使用 li.selected 将背景颜色设置为 #f5f5f5 并显示绿色指示条。但我只能显示两者之一。

我将如何显示它们？

如果您无权访问 jsfiddle，请使用以下代码:

<ul class="nav-items">
    <li class="selected">Home</li>
</ul>

ul.nav-items {
    width: 100%;
    height: 50px;
    list-style: none;
    margin: 0 25px 0 0;
    display: table;
}
ul.nav-items li {
    width: 100px;
    height: 100%;
    border: 1px green dotted;
    float: left;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 50px;
    font-family:'PT Sans', sans-serif;
}
ul.nav-items li a {
    text-decoration: none;
    color: black;
}
ul li.selected {
    background-color: #f5f5f5;
}
ul li.selected {
    position: relative;
    height: 6px;
    background-color: #88991A;
}

Answer 1

您正在使用另一个选择器覆盖 background-color，您应该使用 border-top 而不是 background` 来指示事件标签

ul li.selected {
    background-color: #f5f5f5;
    position: relative;
    border-top: 6px solid #88991a;
}

Demo

---

当您不需要非事件标签的border时，也可​​以使用border但使用透明的color来平衡偏移量，如border-top: 6px solid transparent;/* 对于非事件标签 */

---

我怎样才能做到这一点？

我会使用 :before pseudo with content set position: absolute; in a relative positioned li

ul li.selected:before {
    content: "";
    position: absolute;
    border-top: 6px solid #88991a;
    width: 100%;
    left: 0;
}

Demo 2

---

Note: You are using some redundant properties like display:
table-cell; with float: left; where only either one is required, than vertical-align: middle; and line-height: 50px;

Demo 3 (删除了多余的无用属性)