如何在較少的地方使用嵌套規則？

我正在嘗試爲我的需要自定義引導樣式。我使用LESS。我有一個table-hover類的表。我需要爲懸停效果添加額外的行爲。我想在懸停時向行添加可見（左）邊框。我採用了標準自舉規則並在其中嵌入了其他樣式：如何在較少的地方使用嵌套規則？

.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; 
} 
}

不幸的是，這不起作用。

enter image description here

來源

2014-07-21 plywoods

你的目標真的不明確。 –

我有一張桌子。我爲它添加了一個名爲table-hover的引導類。它稍微改變了懸空行的顏色。此外，我想添加一個垂直的行垂直行（像自舉網站上的導航菜單具有垂直位置指示器的徘徊行的額外指示） – plywoods

您必須使用嵌套規則的正確順序：

.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>

來源

2014-07-21 08:05:41 zessx

在這種情況下，我所有的行都有左邊的可見邊框（我不需要將它們懸停）。 – plywoods

好吧，沒有讓你只想在'：hover'上。我編輯了我的帖子。 – zessx

是的。現在它正是我想要的。謝謝。所以我的錯誤是在嵌套錯誤的順序？ – plywoods

我不知道你的意圖，但它看起來像你想的：

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

來源

2014-07-21 07:48:01

謝謝，但不幸的是，這不會將左邊框添加到該行。 – plywoods

如何在較少的地方使用嵌套規則？

回答

相關問題