CSS - 在没有 ::before 和 ::after 的情况下使用 attr() 函数 [重复]答案

【问题标题】：CSS - Using attr() function without ::before and ::after [duplicate]CSS - 在没有 ::before 和 ::after 的情况下使用 attr() 函数 [重复]
【发布时间】：2017-08-27 14:56:21
【问题描述】：

我想在某个范围内使用attr()function，但我不会使用 ::after 和 ::before 伪元素。例如：

<span size="36">Text</span>
<style>
    span[size]{
        font-size: attr(size pt);
    }
</style>

是否可以使用 CSS、SASS 或 LESS 来做到这一点？

【问题讨论】：

attr() 函数可以与任何 CSS 属性一起使用，但对 content 以外的属性的支持是实验性的。
它仅适用于content、cf. MDN attr() in CSS以外的任何属性
什么是“实验性”？它可以在 Mozilla Firefox 中运行吗？
没有。除了content 和非字符串值之外的其他属性不支持attr()：caniuse.com/#search=attr()
@zer00ne：它是标记中 size 属性的值，以磅为单位。（提示“只需使用 span style=...”）

标签： css sass less

【解决方案1】：

attr() 返回一个string，因此它在今天实际工作的唯一属性是content 属性。

在您的情况下，它将返回 字符串 36，因此无法正确应用。

它的语法有一个实验性的第二个参数<type-or-unit>，其中之一应该能够选择返回值的数据类型，尽管目前还没有浏览器支持它。

附带说明，SASS 和 LESS 都编译成 CSS，并且不能将 CSS 扩展成 CSS 不能做的事情。

【讨论】：