attr

概述

备注: attr() 理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性,其他的属性和高级特性目前是实验性的

译者注:如果发现浏览器兼容表里 attr() 的高级用法依旧没有良好的支持的话,本文大部分内容都是纸上谈兵

CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值,并用于其样式。它也可以用于伪元素,属性值采用伪元素所依附的元素。

attr() 表达式可以用于任何 CSS 属性。 实验性

语法

css
/* 关键字值 */
-webkit-touch-callout: default;
-webkit-touch-callout: none;

/* 全局值 */
-webkit-touch-callout: initial;
-webkit-touch-callout: inherit;
-webkit-touch-callout: revert;
-webkit-touch-callout: revert-layer;
-webkit-touch-callout: unset;

解释

attribute-name

是 CSS 所引用的 HTML 属性名称。

<type-or-unit>

表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法,那么attr()表达式也不合法。若省略,则默认值为string。其合法值包括:

关键字 类型 备注 默认值
string <string> 属性值将被解析为 <string> 空字符串
color 实验性 <color> 属性值将被解析为#xxx、#xxxxxx 或关键字的形式,且必须为合法 CSS <string> 值。前缀与后缀空格将被截掉。 当前颜色
url 实验性 <uri> 属性值将被解析为可用于url()函数的字符串。相对 URL 是根据 HTML 文档的路径解析,而不是样式文件所在的路径。前缀与后缀空格将被截掉。 URL about:invalid,表示资源不存在。
integer 实验性 <integer> 属性值将被解析为 CSS <integer>。若不是合法值(不是整数或超出 CSS 属性规定的数字范围),则使用默认值。前缀与后缀空格将被截掉。 0,或该属性允许的最小值(如果 0 是不合法的值)。
number 实验性 <number> 属性值将被解析为 CSS <number>。若不是合法值(不是数字或超出 CSS 属性规定的数字范围),则使用默认值。前缀与后缀空格将被截掉。 0,或该属性允许的最小值(如果 0 是不合法的值)。
length 实验性 <length> 属性值将被解析为 CSS <length>,带单位,比如 12.5em。若不是合法值(不是长度值或超出 CSS 属性规定的范围),则使用默认值。若属性值是一个相对长度, attr()会将其计算为绝对长度。前缀与后缀空格将被截掉。 0,或该属性允许的最小值(如果 0 是不合法的值)。
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc 实验性 <length> 属性值将被解析为 CSS <number>,不带单位,如 12.5,并被解释为带有所规定单位的 <length> 值。若不是合法值(不是长度值或超出 CSS 属性规定的范围),则使用默认值。若属性值是一个相对长度, attr()会将其计算为绝对长度。前缀与后缀空格将被截掉。 0,或该属性允许的最小值(如果 0 是不合法的值)。
angle 实验性 <angle> 属性值将被解析为 CSS <angle>,带单位,如30.5deg。若不是合法值(不是角度值或超出 CSS 属性规定的范围),则使用默认值。前缀与后缀空格将被截掉。 0deg,或该属性允许的最小值(如果 0deg 是不合法的值)。
deg, grad, rad 实验性 <angle> 属性值将被解析为 CSS <number>,不带单位,如12.5),并被解释为带有所规定单位的 <angle> 值。若不是合法值(不是角度值或超出 CSS 属性规定的范围),则使用默认值。前缀与后缀空格将被截掉。 0deg,或该属性允许的最小值(如果 0deg 是不合法的值)。
time 实验性 <time> 属性值将被解析为 CSS <time>,带单位,如30.5ms。若不是合法值(不是时间值或超出 CSS 属性规定的范围),则使用默认值。前缀与后缀空格将被截掉。 0s,或该属性允许的最小值(如果 0s 是不合法的值)。
s, ms 实验性 <time> 属性值将被解析为 CSS <time>,不带单位,如30.5,并被解释为带有所规定单位的 <time> 值。若不是合法值(不是时间值或超出 CSS 属性规定的范围),则使用默认值。前缀与后缀空格将被截掉。 0s,或该属性允许的最小值(如果 0s 是不合法的值)。
frequency 实验性 <frequency> 属性值将被解析为 CSS <frequency>,带单位,如12.5kHz)。若不是合法值(不是频率值或超出 CSS 属性规定的范围),则使用默认值。前缀与后缀空格将被截掉。 0Hz,或该属性允许的最小值(如果 0Hz 是不合法的值)。
Hz, kHz 实验性 <frequency> 属性值将被解析为 CSS <frequency>,不带单位,如12.5),并被解释为带有所规定单位的<frequency>值。若不是合法值(不是频率值或超出 CSS 属性规定的范围),则使用默认值。前缀与后缀空格将被截掉。 0Hz,或该属性允许的最小值(如果 0Hz 是不合法的值)。
% 实验性 <percentage> 属性值将被解析为 CSS <number>,不带单位,如12.5),并被解释为带有所规定单位的 <percentage>值。若不是合法值(不是数字或超出 CSS 属性规定的范围),则使用默认值。若属性值用作长度,attr()将其计算为绝对长度。前缀与后缀空格将被截掉。 0%,或该属性允许的最小值(如果 0% 是不合法的值)。
<fallback>

如果 HTML 元素缺少所规定的属性值或属性值不合法,则使用fallback值。该值必须合法,且不能包含另一个attr()表达式。如果attr()不是所在 CSS 属性值的唯一值,其<fallback>值必须为<type-or-unit>所指定的类型,否则 CSS 会使用相应<type-or-unit>定义的默认值(见上表)。

示例

css
p:before {
  content: attr(data-foo) " ";
}
html
<p data-foo="hello">world</p>

结果

hello world

示例 1

HTML

html
<p data-foo="hello">world</p>

CSS

css
[data-foo]::before {
  content: attr(data-foo) " ";
}

Result

示例 2

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

HTML

html
<div class="background" data-background="lime">
  颜色应该是红色而不是绿色因为浏览器并不支持 attr() 的高级用法
</div>

CSS

css
.background {
  height: 100vh;
}
css
.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}

规范

Specification
CSS Values and Units Module Level 5
# attr-notation

浏览器兼容性

BCD tables only load in the browser

参见