css - 如何在每 3 行和每 3 列之后制作用于绘制边框的 css

Question

我正在尝试为 sudoko 之类的表格构建 css。非常感谢任何帮助。我想每 3 行和每 3 列绘制边框。

  .no-stripes  .v-table-row,.no-stripes  .v-table-row-odd, .v-table-cell-content
    {
    background: white;
    color: $cellcolor;
    width: 40px;
    height: 40px;
    text-align: center;
    border-left: solid 1px black;
    border-bottom: solid 1px black; 
 }

Answer 1

为 td 和 tr 元素尝试 :nth-of-type(3n) 选择器。

在这里sample

CSS:

td {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}

td:nth-of-type(3n) {    
    border-right: 3px solid red;
}

tr:nth-of-type(3n) td {    
    border-bottom: 3px solid red;
}

table {
    border: 3px solid red;
}