css 选择具有特定类的列表项,但仅当它们是组中的最后一个时

zed5wv10  于 2022-12-05  发布在  其他
关注(0)|答案(1)|浏览(192)

假设有一个列表如下所示:

<ul class="list">
  <li class="item">Text</li>
  <li class="item unique">Text</li>
  <li class="item unique">Text</li> // <-- Should be selected
  <li class="item">Text</li>
  <li class="item unique">Text</li>
  <li class="item unique">Text</li>
  <li class="item unique">Text</li> // <-- Should be selected
  <li class="item">Text</li>
  <li class="item unique">Text</li> // <-- Should be selected
  <li class="item">Text</li> 
<ul>

我试图找到一种方法来选择类为unique的所有列表项,但前提是此项是组中的最后一项,这意味着不应选择此项之前的类为unique的所有列表项。
如果HTML结构不能改变,有没有办法达到预期的行为?

s5a0g9ez

s5a0g9ez1#

如果可以使用:has(Firefox目前不支持),则可以是:

.unique:has(+ :not(.unique)) {
  color: crimson;
}

More about :has()
示例:(与Firefox、IE和旧版浏览器不兼容)
第一次
如果:has不是一个选项,也许可以使用一些Javascript代码作为后备解决方案。
示例:(使用Javascript的回退解决方案)
第一个

相关问题