如何让CSS的left属性通过attr()获取HTML元素的属性值？

不行，这种写法目前在主流浏览器里无法生效。

原因说明： #

• CSS的attr()函数最初仅被规范允许用于伪元素的content属性（也就是你提到的:before/:after场景），这部分是所有浏览器都支持的标准功能。
• 虽然CSS Values and Units Module Level 4标准扩展了attr()的能力，允许它为left这类布局属性赋值，但目前几乎没有主流浏览器实现这个扩展特性，所以直接写left: attr(left-value);对普通元素完全不起作用。

可行的替代方案： #

方案1：使用CSS自定义属性（变量）

把HTML属性的逻辑换成内联定义CSS变量，再在样式里引用：

<div style="--left: 30px;"></div>

div {
  position: relative; /* left属性需要元素定位生效 */
  left: var(--left);
}

这个方法兼容性极佳，所有现代浏览器都支持。

方案2：结合JavaScript实现

如果必须保留left-value自定义属性，可以用JS读取属性值并设置到元素样式上：

<div left-value="30px"></div>

document.querySelectorAll('div[left-value]').forEach(el => {
  el.style.left = el.getAttribute('left-value');
});

内容的提问来源于stack exchange，提问作者esraa