在角度選擇器上使用最后一個

Question

如何讓最后一個CSS選擇器在角度組件選擇器上工作？ 我想將樣式添加到具有特定類的最后一個組件項中。

我的HTML：

<component-name class="abc"></component-name>
<component-name class="abc"></component-name>
<component-name class="abc"></component-name>
<component-name class="efg"></component-name>
<component-name class="efg"></component-name>

在上述情況下，我想為最后一個.abc項設置樣式。 所以我的CSS：

component-name.abc:last-child {
 // some styles
}

這行不通。 這也沒有：

component-name.abc:last-of-type {
    // some styles
}

在這種情況下，如何選擇最后一個孩子？

Answer 1

您張貼在component-name.css -file中的CSS代碼嗎？ 如果是這種情況，請將其移至父組件樣式表或style.css 。

Answer 2

您可以使用jQuery last()

堆棧片段

 $('component-name.abc').last().css( "background-color", "red" ) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <component-name class="abc">abc</component-name> <component-name class="abc">abc</component-name> <component-name class="abc">abc</component-name> <component-name class="efg">efg</component-name> <component-name class="efg">efg</component-name> 

參考鏈接：

• 持續（）

Answer 3

您可以嘗試第n個類型選擇器。

我做了一個小提琴： https : //jsfiddle.net/34vwp9xd/

.abc:nth-of-type(3) {
  background:red;
}

但這並不理想，因為您必須知道要設置樣式的類的索引，我認為您需要使用JS來解決此問題，方法是在abc類的最后一個元素中添加last類