如何在没有 nth-child 的情况下 select <ul> 列表中的特定元素？

Question

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

所以我想知道是否有比 nth-child 更好的方法来 select li 元素？更具体的方法？他们每个人都有一个 header...有什么方法可以将其用于 select 他们吗？

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

Answer 1

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

如果您指的是列表的最后一个元素，它将带您到达列表的最后一个元素

Answer 2

您可以使用其他选择器作为属性，例如 data 属性。

此外，您还可以使用其他选择器，例如 class 或 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...
}

此致

如何在没有 nth-child 的情况下 select <ul> 列表中的特定元素？

How to select a specific element in a <ul> list without nth-child?

css

list

stylish