.hot {
text-align: center;
width: 18px;
height: 18px;
color: rgba(255,255,255,1.00);
display: block;
border-radius: 2px;
margin: 0px 5px 0px 6px;
font-size: 12px;
line-height: 18px;
background-color: rgba(209,209,209,1);
}
.hot:before{
content:counter(sectioncounter);
counter-increment:sectioncounter;
}
div.hot:nth-child(1){
background-color: rgba(255,78,0,1.00);
div.hot:nth-child(2){
background-color: rgba(255,78,0,1.00);
div.hot:nth-child(3){
background-color: rgba(255,78,0,1.00);
}
下面是html
{这里是sql，取出10条记录}
<tr>
<td><div class="hot"></div></td>
<td><span>标题</span>
</td>
</tr>
{/sql结束}我想用纯css做一个排行榜，1-3的序列号背景颜色为rgba(255,78,0,1.00)，4-7的颜色为rgba(209,209,209,1)。因为某种原因必须用table来做，.hot就是这个数字图标用到了css计数器，背景颜色试了一下伪类的选择器都是针对父子关系。针对表格的td无效。有没高手知道如何解决？
是不是少了几个结尾大括号？
div.hot:nth-child(1){
background-color: rgba(255,78,0,1.00);
}
div.hot:nth-child(2){
background-color: rgba(255,78,0,1.00);
}
div.hot:nth-child(3){
background-color: rgba(255,78,0,1.00);
}tr:nth-child(1) .hot{
background: #f00;
}
tr:nth-child(2) .hot{
background: #333;
}div.hot:nth-child(1){
background-color: rgba(255,78,0,1.00);div.hot:nth-child(2){
background-color: rgba(255,78,0,1.00);div.hot:nth-child(3){
background-color: rgba(255,78,0,1.00);}
这段样式替换成这样：
table tr:nth-child(1) div.hot{
background-color: rgba(255,78,0,1.00);}table tr:nth-child(2) div.hot{
background-color: rgba(255,78,0,1.00);}table tr:nth-child(3) div.hot{
background-color: rgba(255,78,0,1.00);}