使用LESS，我可以在嵌套的子元素中引用父元素吗？

Question

我有一张表，有一个标题行和许多数据行。我在第一栏中有一个复选框。在th单元格中，我想在td单元格中添加顶部和底部边距，但我不想这样做。

对于类th的{​​{1}}和td元素，我都有LESS（css）相同，两个单元格中的.col-checkbox元素都相同共享的CSS。我想在标签label中添加顶部/底部的页边距。

.html文件

th

.less文件

<table>
    <tr>
        <th class="col-checkbox">
            <div>Column Label</div>
            <label class="custom-checkbox">
                <input type="checkbox" />
                <span class="checkbox"></span>
            </label>
        </th>
        <th>
           Unimportant, there are more columns as well
        </th>
    </tr>
    <tr>
        <td class="col-checkbox">
            <label class="custom-checkbox">
                <input type="checkbox" />
                <span class="checkbox"></span>
            </label>
        </td>
        <td>
           Unimportant, there are more columns as well
        </td>
    </tr>
</table>

我知道我可以像上面一样实现它，但是我很好奇我是否可以仅通过引用.col-checkbox { width: 30px; // more css here label.custom-checkbox { height: 24px; // more css here // I know I can do the following, but I'd like to not have to add // more classes if I can someone make this dependent on whether it // is in the th or td element //&.header { // margin: 6px auto; //} // //&.data { // margin: 0 auto; //} } } 和td元素而不重复其他CSS来做到这一点。我不这么认为，但我想我还是要问。

Answer 1

您似乎已经熟悉&运算符。好吧，没有走在选择器之前。相反，您可以在选择器（例如th&）之后使用它来获取所需的内容。

所以这个：

.col-checkbox {
  width: 30px;
  // more css here

  label.custom-checkbox {
    height: 24px;
    // more css here
  }

  th& {
    margin: 10px 0;
  }
}

输出以下内容：

.col-checkbox {
  width: 30px;
}
.col-checkbox label.custom-checkbox {
  height: 24px;
}
th.col-checkbox {
  margin: 10px 0;
}

不过，请注意，如果嵌套的级别超过一个，则此模式可能无法按预期工作。

考虑以下代码：

.col-checkbox {
  width: 30px;
  // more css here

  label.custom-checkbox {
    height: 24px;
    // more css here
    .checkbox& {
      color: navy;
    }
  }
}

您可能希望从中得到帮助：

.col-checkbox {
  width: 30px;
}
.col-checkbox label.custom-checkbox {
  height: 24px;
}
.col-checkbox label.custom-checkbox.checkbox {
  color: navy;
}

但是实际上您会得到这个：

.col-checkbox {
  width: 30px;
}
.col-checkbox label.custom-checkbox {
  height: 24px;
}
.checkbox.col-checkbox label.custom-checkbox {
  color: navy;
}