有没有办法缩短css选择器？

我正在使用SCSS。我有一些要指定列宽和文本对齐方式的表。现在，我有一堆css选择器，如下所示：

.some-table-class{
  &>colgroup>col{
    &:nth-child(1){width: /* some value */}
    &:nth-child(2){width: /* ... */}
    ...
  }
  &>tbody>tr>td{
    &:nth-child(1)>*{text-align: /* some value */}
    &:nth-child(2)>*{text-align: /* ...*/}
    ...
  }
}

some_function(.some-table-class){
  &:nth-child(1){width: /* some value */, text-align: /* some value */}
  &:nth-child(2){width: /* ... */, text-align: /* ...*/}
}

有没有一种方法可以使用SCS的一些功能来简化这个过程，这样我就不必重复编写

&>colgroup>col

，

&>tbody>tr>td>

，以及

*

？有没有一种方法可以将函数应用于css选择器，这样我就可以编写如下内容：

.some-table-class{
  &>colgroup>col{
    &:nth-child(1){width: /* some value */}
    &:nth-child(2){width: /* ... */}
    ...
  }
  &>tbody>tr>td{
    &:nth-child(1)>*{text-align: /* some value */}
    &:nth-child(2)>*{text-align: /* ...*/}
    ...
  }
}

some_function(.some-table-class){
  &:nth-child(1){width: /* some value */, text-align: /* some value */}
  &:nth-child(2){width: /* ... */, text-align: /* ...*/}
}

我建议：

.some-table-class {

  > colgroup > col
    @for $i from 1 through N {
      &:nth-child($i) {width: /* some value */}
    }
  }

  > tbody > tr > td {
    @for $i from 1 through N {
      &:nth-child($i) > * {text-align: /* some value */}
    }
  }

}

---

那么呢？

除非您希望有嵌套的表或实例，其中您只希望以colgroups（而不是colgroups）内的col为目标，否则您会有很多冗余

table.test {
    // must the col appear within a colgroup?
    col {
        $i: 1;
        @each $w in (10em, 5em, 10em, 20em, 15em) {
            &:nth-child(#{$i}) {
                width: $w;
            }
            $i: $i + 1;
        }
    }

    // a td can't appear outside of a tr
    tbody td {
        $i: 1;
        @each $a in (left, left, center, right, left) {
            // is the alignment only for direct descendants of the td necessary?
            &:nth-child(#{$i}) {
                text-align: $a;
            }
            $i: $i + 1;
        }
    }
}

生成：

table.test col:nth-child(1) {
  width: 10em;
}

table.test col:nth-child(2) {
  width: 5em;
}

table.test col:nth-child(3) {
  width: 10em;
}

table.test col:nth-child(4) {
  width: 20em;
}

table.test col:nth-child(5) {
  width: 15em;
}

table.test tbody td:nth-child(1) {
  text-align: left;
}

table.test tbody td:nth-child(2) {
  text-align: left;
}

table.test tbody td:nth-child(3) {
  text-align: center;
}

table.test tbody td:nth-child(4) {
  text-align: right;
}

table.test tbody td:nth-child(5) {
  text-align: left;
}

table.test col:nth-child(1) {
  width: 10em;
}

table.test tbody td:nth-child(1) {
  text-align: left;
}

table.test col:nth-child(2) {
  width: 5em;
}

table.test tbody td:nth-child(2) {
  text-align: left;
}

table.test col:nth-child(3) {
  width: 10em;
}

table.test tbody td:nth-child(3) {
  text-align: center;
}

table.test col:nth-child(4) {
  width: 20em;
}

table.test tbody td:nth-child(4) {
  text-align: right;
}

table.test col:nth-child(5) {
  width: 15em;
}

table.test tbody td:nth-child(5) {
  text-align: left;
}

或者

生成：

table.test col:nth-child(1) {
  width: 10em;
}

table.test col:nth-child(2) {
  width: 5em;
}

table.test col:nth-child(3) {
  width: 10em;
}

table.test col:nth-child(4) {
  width: 20em;
}

table.test col:nth-child(5) {
  width: 15em;
}

table.test tbody td:nth-child(1) {
  text-align: left;
}

table.test tbody td:nth-child(2) {
  text-align: left;
}

table.test tbody td:nth-child(3) {
  text-align: center;
}

table.test tbody td:nth-child(4) {
  text-align: right;
}

table.test tbody td:nth-child(5) {
  text-align: left;
}

table.test col:nth-child(1) {
  width: 10em;
}

table.test tbody td:nth-child(1) {
  text-align: left;
}

table.test col:nth-child(2) {
  width: 5em;
}

table.test tbody td:nth-child(2) {
  text-align: left;
}

table.test col:nth-child(3) {
  width: 10em;
}

table.test tbody td:nth-child(3) {
  text-align: center;
}

table.test col:nth-child(4) {
  width: 20em;
}

table.test tbody td:nth-child(4) {
  text-align: right;
}

table.test col:nth-child(5) {
  width: 15em;
}

table.test tbody td:nth-child(5) {
  text-align: left;
}

---

你查过了吗？有像

@for

和

each

这样的控制指令。您是否只希望为每个元素设置一个属性（例如，

col

上仅设置宽度，而

td

上仅设置文本对齐）？