Flexbox订单+ CSS计数器

Question

是否可以将CSS计数器与flexbox订单样式结合使用？我希望在计数器编号与元素顺序相同时实现效果。

当某些元素具有“ display：none”属性时，计数器会更新，因此我认为也许它也适用于flexbox命令。

   ol {
      list-style: none;
      display: flex;
      counter-reset: section;
    }
    
    li {
      width: 50px;
      height: 50px;
    }
    
    li::before {
      counter-increment: section;
      content: counter(section);
    }

 
 <ol>
      <li style="background-color: wheat; order: 2"></li> <!-- should display 2 -->
      <li style="background-color: olive; order: 3"></li> <!-- should display 3 -->
      <li style="background-color: purple; order: 1"></li> <!-- should sisplay 1 -->
 </ol>

 

https://jsfiddle.net/esx9j0hm/9/

Answer 1

阅读this MDN article后，我发现您无法在activity.Locale = "es-ES";中显示css属性值，但是有两种方法可以做到这一点。

1。使用数据属性

向content元素添加数据属性并在内容中显示它们：

li

ol {
  list-style: none;
  display: flex;
}

li {
  width: 50px;
  height: 50px;
}

li::before {
  content: attr(data-order);
}

2。使用JS

使用js获取<ol> <li style="background-color: wheat; order: 2" data-order="2"></li> <!-- should display 2 --> <li style="background-color: olive; order: 3" data-order="3"></li> <!-- should display 3 --> <li style="background-color: lightblue; order: 1" data-order="1"></li> <!-- should sisplay 1 --> </ol>元素的样式并相应地设置其内容：

li

let elements = document.querySelectorAll('ol li');
Array.prototype.forEach.call(elements, function(el, i) {
  let order = getComputedStyle(el)['order'];
  el.textContent = order;
});

ol {
  list-style: none;
  display: flex;
}

li {
  width: 50px;
  height: 50px;
}