使用:: before selector

Question

我对sass很新，并且在 :: before 表示法中使用 @for循环时遇到一些麻烦。

我有一个包含六个 td 元素的表格行。

  <tr> 
      <td></td>
      <td></td>
      <td data-th="Entered"></td>
      <td data-th="Location"></td>
      <td></td>
      <td></td>
   </tr>

我已将桌面更改为列表，并希望在移动视图时将数据添加到我的列表中。

我希望我的for循环实现能够正常工作

@for $i from 3 to 5 {
  td::before(#{$i}) {
    /* The middle element */
    content: attr(data-th)": ";
  }
}

但是，我无法看到任何变化。

我在第n个孩子身上用背景颜色的概念测试了语法，并且它有效

@for $i from 3 to 5 {
  td:nth-child(#{$i}) {
    /* The middle element */
    background: red;
  }
}

我也可以通过简单地完成

来实现它

td {

      &:before { content: attr(data-th)": " }

}

然而，这种方法将冒号添加到每个td。任何建议将不胜感激。

Answer 1

在识别第n个孩子后，我需要在之前添加。 nth-child 似乎是必需的。

@for $i from 3 to 5 {
   td:nth-child(#{$i}):before {
   /* The middle element */
      content: attr(data-th)": ";
   }
}