html - 如何在 less 中使用嵌套规则？

Question

我正在尝试根据我的需要自定义 Bootstrap 样式。我少用。我有一张带有 table-hover 类的 table 。我需要为悬停效果添加额外的行为。我想在悬停时向行添加可见(左)边框。我采用了标准的 Bootstrap 规则并在其中嵌套了一个额外的样式:

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;

tr {
    border-left: 4px;
    border-left-color: @active-element-color;
    border-left-style: solid;
}
}

不幸的是，这不起作用。

Answer 1

您必须对嵌套规则使用正确的顺序:

.table-hover > tbody > tr {
    /* Match every <tr> in a .table-hover */
    border-left: 4px;
    border-left-color: transparent;
    border-left-style: solid;

    &:hover {
        /* Match hover stats for these <tr> */
        border-left-color: @active-element-color;

        > th, 
        > td {
            /* Match <th> and <td> for hovered <tr> */
            background-color: #f5f5f5;
        }
    }
}

在您的示例中，您试图定位 .table-hover > tbody > tr:hover > th tr :

<table class="table-hover">
    <tbody>
        <tr> <!-- :hover -->
            <th>
                <tr><!-- Targeted element --></tr>
            </th>
        </tr>
    </tbody>
</table>