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 - 文件中发布了css代码吗？如果是这种情况，请将其移至父组件样式表或style.css。

Answer 2

您可以使用jQuery last()

Stack Snippet

$('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>

参考链接：

last()

Answer 3

您可以尝试使用nth-of-type选择器。

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

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

但它不太理想，因为你必须知道要设置样式的类的索引，我认为你需要使用JS来通过向last类添加'react-hot-loader/babel'类来解决这个问题。类abc的最后一个元素

在角度选择器上使用last-child

3 个答案: