如何使用 CSS 选择器循环多个匹配项？

Question

我有一个 CSS 选择器，它匹配 Instagram 上的所有点赞按钮。假设屏幕上有五个帖子，CSS 选择器将 return 五场比赛，但我不知道逐一循环项目所需的语法。

span.fr66n>button -> Returns 5 matches

Image of Selection

谁能告诉我如何循环匹配？

Answer 1

虽然不完全是一种脚本语言 - 您可以循环浏览项目并分配一个索引并显示 - CSS counters。

这是一个仅显示功能 - 你不能 select 一个项目 - 除非通过 nth-of-type() 或 nth-child() 等手动，所以如果你想定位 select或者您将需要 js...但是如果您想直观地呈现与项目列表相关联的索引 - 可能有手提箱

body {
  counter-reset: button;
}

button {
  position: relative;
  display: block;
  margin: 8px;
}

button::before {
  counter-increment: button;
  content: "Button " counter(button) ": ";
}

<p>Using CSS Counters</p>

<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>

如何使用 CSS 选择器循环多个匹配项？

How to Cycle through Multiple Matches using CSS Selector?

css-selectors