css - 求教 如何使非父子关系的元素也可以使用nth

问题描述

问 题

.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无效。有没高手知道如何解决？

解决方案

tr:nth-child(1) .hot{
    background: #f00;
}
tr:nth-child(2) .hot{
    background: #333;
}

这篇关于css - 求教 如何使非父子关系的元素也可以使用nth的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！