對于以下HTML:

<div class="parent">
  <div class="bdg" data-order="4">1</div>
  <div class="bdg" data-order="3">2</div>
  <div class="bdg" data-order="2">3</div>
  <div class="bdg" data-order="1">4</div>
</div>

我有這個CSS使用attr()函數:

.parent { display: flex; }
.bdg { order: attr(data-order number, 5000); }

并且由瀏覽器(Chrome)標記:

??無效的屬性值

我也嘗試過在沒有attr()的第三個默認值參數的情況下這樣做:

.bdg { order: attr(data-order number); }

如果沒有attr()的第二個類型和第三個默認值參數:

.bdg { order: attr(data-order); }

運行示例:

.parent { display: flex; }
.bdg { order: attr(data-order number, 5000); }

<div class="parent">
  <div class="bdg" data-order="4">1</div>
  <div class="bdg" data-order="3">2</div>
  <div class="bdg" data-order="2">3</div>
  <div class="bdg" data-order="1">4</div>
</div>

.parent {
  display: flex;
}

.bdg:before {
  content: attr(data-order);
  display: inline-block;
  background-color: red;
  color: blue;
  padding: 5px;
}

<div class="parent">
  <div class="bdg" data-order="4">1</div>
  <div class="bdg" data-order="3">2</div>
  <div class="bdg" data-order="2">3</div>
  <div class="bdg" data-order="1">4</div>
</div>

原來attr()仍然是實驗性的，只適用于內容屬性——請看這里。

我最終改用了var()。

.parent { display: flex; }
.bdg { order: var(--order); }

<div class="parent">
  <div class="bdg" style="--order: 4">1</div>
  <div class="bdg" style="--order: 3">2</div>
  <div class="bdg" style="--order: 2">3</div>
  <div class="bdg" style="--order: 1">4</div>
</div>

和任何其他值的名稱還不被支持(見這里)