Twitter bootstrap 3 引导列表组条带化冲突与悬停
我试图模拟Twitter bootstrap 3 引导列表组条带化冲突与悬停,twitter-bootstrap-3,css,twitter-bootstrap,Twitter Bootstrap 3,Css,Twitter Bootstrap,我试图模拟列表组上的表格悬停和表格条带化。首先，我尝试了以下悬停方法： <!-- 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; } 我不知道如何才能使悬停和剥离这两种效
列表组上的表格悬停
和表格条带化
。首先，我尝试了以下悬停方法：
<!-- 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;
}
我不知道如何才能使悬停和剥离这两种效果与table同时工作？：悬停需要排在最后
ul.list-group.list-group-striped li:n类型（奇数）{
背景：蓝色；
}
ul.list-group.list-group-striped li：第n个类型（偶数）{
背景：紫色；
}
ul.list-group.list-group-hover li:悬停{
背景：红色；
}
- asdf
- asdf
- asdf
- asdf
- asdf
- asdf
- asdf
- asdf
<!-- 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;
}