我可以 select 一个元素的计数值吗？

Question

是否可以根据计数器值定位元素？例如，我可以在 my-counter 为 10 时加粗一个元素吗？所以像这样：

body {
    //initialize the counter with a starting value of 5
    counter-reset: my-counter 5;
}

.some-class::before {
    // increment and insert the counter value in the element
    counter-increment: my-counter;
    content: counter(my-counter);
}

// is something like this possible?

.some-class::before::my-counter(10) {
    // target the element when its counter is 10
    font-weight: bold;
}

对于上下文，我这样做是为了制作一个响应列表（是的，圣诞节的 12 天），其中同一天以各种尺寸突出显示。

Answer 1

您可以使用脚本，或者，如果元素彼此相邻，nth-child(x)

div.counted:nth-child(10){
  color: red;
}

<div>
  <div class="counted">1</div>
  <div class="counted">2</div>
  <div class="counted">3</div>
  <div class="counted">4</div>
  <div class="counted">5</div>
  <div class="counted">6</div>
  <div class="counted">7</div>
  <div class="counted">8</div>
  <div class="counted">9</div>
  <div class="counted">10</div>
  <div class="counted">11</div>
</div>

Answer 2

div[data-count='1']{
  color: red;
}

<div>
  <div data-count="1">1</div>
  <div data-count="2">2</div>
  <div data-count="3">3</div>
  <div data-count="4">4</div>
  <div data-count="5">5</div>
</div>

如果您通过使用另一个自定义属性（例如 data-count 和所需的值来修改数字结构，则可以避免使用 nth-child，可以使用 css 轻松选择.

我可以 select 一个元素的计数值吗？

Can I select an element by its counter value?

css

css-counter