仅设置列表中的某些项目

Question

有什么方法可以在html列表中设置一些项目的样式吗？

例如

有没有办法在列表中的最后两个项目周围放置边框？

Answer 1

试过这个：

:last-child,
:nth-last-child(2) {
  ruleset
}

Answer 2

您可以使用:nth-last-child() pseudo selector在列表中的最后两个列表项（li元素）周围添加样式。

li:nth-last-child(-n+2) {
    your styles go here
}

请注意，IE8中:nth-last-child() 不支持。

Answer 3

您可以使用:not选择器执行此操作：

div ul:not(:first-child) {
    background-color: #900;
}

这将选择除第一项以外的所有项目，无论项目数量如何。

此外，如果您在HTML中构建for循环，则可以向forloop计数器中的所有项添加一个类，第一个除外。

Answer 4

如果列表是已知长度，您还可以使用nth-child伪类，例如：

li:nth-child(n+2) {
    border: 1px solid red;
}

这将在列表中的第一个项目旁边放置一个边框。

Answer 5

您也可以使用第二个子元素

li:first-child + li  {
border: 1px

}

这将边框放到第三个子元素

    li:first-child + li + l1 {
border: 1px

}