为什么CSS样式用于flex的顺序：attr(data-order)是否被标记为无效？[副本]

iyfjxgzm 于 2023-05-23 发布在其他

关注(0)|答案(3)|浏览(98)

此问题已在此处有答案：

grid-area does not seem to work with the attr function, is this by design?（1个答案）
34分钟前关闭
对于以下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>

我使用attr() function创建了这个CSS：

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

并且它被浏览器（Chrome）标记：
无效️的属性值

我也尝试过在没有attr()的第三个 default value 参数的情况下实现这两个功能：

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

如果没有attr()的第二个 type 和第三个 default value 参数：

.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>

为什么会这样？

css

来源：https://stackoverflow.com/questions/76312269/why-css-styles-for-flexs-order-attrdata-order-are-marked-as-invalid

3条答案

按热度按时间

lmvvr0a81#

1.其他来自simple attr(data-attribute)的表单在任何浏览器中都没有实现

attr仅适用于:before/:aftercontent规则，如第一个最上面的 * 注解 * 中所述

.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>

赞(0）回复(0）举报 2023-05-23

rqqzpn5f2#

原来attr()仍然是实验性的，只适用于content属性-see here。
最后我使用了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>

赞(0）回复(0）举报 2023-05-23

nafvub8i3#

`attrs()`默认`<type-or-unit>`为字符串，因此您的`order`属性无效

和任何其他不支持值名称的值（请参阅此处）

赞(0）回复(0）举报 2023-05-23

我来回答

为什么CSS样式用于flex的顺序：attr(data-order)是否被标记为无效？[副本]

3条答案

`attrs()`默认`<type-or-unit>`为字符串，因此您的`order`属性无效

相关问题

热门标签

最新问答

为什么CSS样式用于flex的顺序：attr(data-order)是否被标记为无效？[副本]

3条答案

attrs()默认<type-or-unit>为字符串，因此您的order属性无效

相关问题

热门标签

最新问答

`attrs()`默认`<type-or-unit>`为字符串，因此您的`order`属性无效