css - 如何选择一个特定的元素没有第 n 个孩子的列表？

Question

所以我使用 Stylish 插件来编辑我喜欢的网页。有一个 ul 元素，我希望其中一些项目成为图标，而其中一些项目消失。所以我把它全部设置好了，它工作正常。但是，有时网站会在列表中再添加一个元素并将所有内容都搞砸了，因为我使用的是 nth-child 选择器，显然当每个元素的数量发生变化时，它会破坏我的 css。

所以我想知道是否有更好的方法来选择除 nth-child 以外的 li 元素？更具体的方法？他们每个人都有一个标题......有什么方法可以使用它来选择它们吗？

我刚刚想到的另一个想法是，也许我可以从最后一个 li 倒数，因为新的列表项被添加到顶部……有没有办法做到这一点？

Answer 1

您可以使用另一个选择器，例如属性，例如data属性。

此外，您可以使用其他选择器，例如 aclass或id

HTML：

<ul>
    <li id="id-1" class="id-1" data-id="1">Element</li>
</ul>

CSS：

li#id-1{
    //something...
}
// or
li.id-1{
    // something...
}
// or
li[data-id="1"]{
    // something...
}

更新：

CSS：

li:first-of-type{
    // something...
}
// or

li:last-of-type{
    // something...
}

问候

Answer 2

<style>
li:last-child {
 /* style goes here*/
}
</style>

如果这是您所指的，将使您到达列表的最后一个元素