Question

我是less

的新手

我想要实现的目标是，我想为th元素提供一个类，然后希望为与td具有相同索引的所有th应用相同的样式。所以基本上我试图找出th的索引，以便我可以使用:nth-child()作为该索引。

这可能少用吗？

修改

所以我想尝试实现这样的目标

td:nth-child(@index_of_th_with_particular_class)
{ 

}

Answer 1

希望你的意思是这样，请看看sample pen

CSS＆amp; HTML

table {
  border-collapse: collapse;
}
td {
  padding: 5px;
  border: 1px solid #ddd;
}
tr:nth-child(3) td {
  background: yellow;
}
tr:nth-child(4) td:nth-child(5) {
  background: red;
}

<div>
    <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
            </tr>
            <tr>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
            </tr>
            <tr>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
            </tr>
            <tr>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
            </tr>
            <tr>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
            </tr>
            <tr>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
            </tr>
            <tr>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
            </tr>
            <tr>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
            </tr>
            <tr>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
                <td>Test data</td>
            </tr>
        </tbody>
    </table>
</div>

LESS

table {
  border-collapse: collapse;
}
td {
  padding: 5px;
  border: 1px solid #ddd;
}
tr {
  &:nth-child(3) {
    td {
      background: yellow;
    }
  }
  &:nth-child(4) {
    td {
      &:nth-child(5) {
        background: red;
      }
    }
  }
}

Less：查找列的索引并应用样式

1 个答案: