如何在较少的情况下使用嵌套规则？

Question

我正在尝试根据自己的需要自定义引导程序样式。我用的是LESS。我有一个表与悬停类的表。我需要为悬停效果添加额外的行为。我希望在悬停时向行添加可见（左）边框。我采用了标准的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>

Answer 2

我不确定你的意图，但看起来你想要这个：

.table-hover > tbody > tr:hover {
    border-left-width: 4px;
    border-left-color: @active-element-color;
    border-left-style: solid;
    & > th, & > td {
        background-color: #f5f5f5;
    }
}