css - Bootstrap 列表组条纹与悬停冲突

Question

我正在尝试模拟 twitter-bootstrap-3 .table-hover 和 list-group 上的 table-striped。首先，我尝试了以下悬停操作:

<!-- HTML --!>
<ul class="list-group list-group-hover">
  <li class="list-group-item">...
...
// CSS
ul.list-group.list-group-hover li:hover{
    background: $table-bg-hover;
}

上面的代码工作正常，它会在每个列表的元素上生成悬停。

但是，尝试添加 striped like table 如下代码，不起作用，即 strip 效果仅有效但 hover 无效。

<!-- HTML -->

<ul class="list-group list-group-hover list-group-striped">
...

// CSS
ul.list-group.list-group-hover li:hover{
    background: $table-bg-hover;
}
ul.list-group.list-group-striped li:nth-of-type(odd){
    background: $table-bg-accent;
}
ul.list-group.list-group-striped li:nth-of-type(even){
    background: $body-bg;
}

我不知道如何让悬停和剥离这两种效果与 table 同时工作？

Answer 1

:hover 需要放在最后

ul.list-group.list-group-striped li:nth-of-type(odd){
    background: blue;
}
ul.list-group.list-group-striped li:nth-of-type(even){
    background: purple;
}
ul.list-group.list-group-hover li:hover{
    background: red;
}

<ul class="list-group list-group-hover list-group-striped">
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
</ul>