attr()

注意：attr() 函数可以与任何 CSS 属性一起使用，但对除 content 之外的属性的支持是实验性的，并且对 type-or-unit 参数的支持很少。

attr() CSS 函数 用于检索所选元素的属性值并在样式表中使用它。它也可以用于 伪元素，在这种情况下，将返回伪元素源元素上的属性值。

试试看

语法

css
/* Simple usage */
attr(data-count);
attr(title);

/* With type */
attr(src url);
attr(data-count number);
attr(data-width px);

/* With fallback */
attr(data-count number, 0);
attr(src url, "");
attr(data-width px, inherit);
attr(data-something, "default");

值

attribute-name

CSS 中引用的 HTML 元素上的属性名称。

<type-or-unit>

表示属性值的类型或单位的关键字，例如在 HTML 中某些属性具有隐式单位。如果将 <type-or-unit> 用作给定属性的值是无效的，则 attr() 表达式也将无效。如果省略，则默认为 string。有效值的列表为

string

属性值被视为 CSS <string>。它不会被重新解析，特别是字符按原样使用，而不是 CSS 转义被转换为不同的字符。

默认值：空字符串。

color

属性值被解析为哈希（3 值或 6 值哈希）或关键字。它必须是有效的 CSS <string> 值。开头和结尾的空格将被去除。

默认值：currentcolor。

url

属性值被解析为在 CSS url() 函数内使用的字符串。相对 URL 相对于原始文档解析，而不是相对于样式表解析。开头和结尾的空格将被去除。

默认值：URL about:invalid，它指向具有通用错误条件的非存在文档。

integer

属性值被解析为 CSS <integer>。如果它无效，即不是整数或超出 CSS 属性接受的范围，则使用默认值。开头和结尾的空格将被去除。

默认值：0，或者，如果 0 不是属性的有效值，则为属性的最小值。

number

属性值被解析为 CSS <number>。如果无效，即不是数字或超出 CSS 属性接受的范围，则使用默认值。开头和结尾的空格将被去除。

默认值：0，或者，如果 0 不是属性的有效值，则为属性的最小值。

长度

属性值被解析为 CSS <length> 尺寸，包括单位（例如 12.5em）。如果无效，即不是长度或超出 CSS 属性接受的范围，则使用默认值。如果给定的单位是相对长度，attr() 会将其计算为绝对长度。开头和结尾的空格将被去除。

默认值：0，或者，如果 0 不是属性的有效值，则为属性的最小值。

em、ex、px、rem、vw、vh、vmin、vmax、mm、cm、in、pt 或 pc

属性值被解析为 CSS <number>，即不带单位（例如 12.5），并解释为具有指定单位的 <length>。如果无效，即不是数字或超出 CSS 属性接受的范围，则使用默认值。如果给定的单位是相对长度，attr() 会将其计算为绝对长度。开头和结尾的空格将被去除。

默认值：0，或者，如果 0 不是属性的有效值，则为属性的最小值。

角度

属性值被解析为 CSS <angle> 尺寸，包括单位（例如 30.5deg）。如果无效，即不是角度或超出 CSS 属性接受的范围，则使用默认值。开头和结尾的空格将被去除。

默认值：0deg，或者，如果 0deg 不是属性的有效值，则使用属性的最小值。

deg、grad、rad

属性值被解析为 CSS <number>，即不带单位（例如 12.5），并解释为具有指定单位的 <angle>。如果无效，即不是数字或超出 CSS 属性接受的范围，则使用默认值。开头和结尾的空格将被去除。

默认值：0deg，或者，如果 0deg 不是属性的有效值，则使用属性的最小值。

时间

属性值被解析为 CSS <time> 尺寸，包括单位（例如 30.5ms）。如果无效，即不是时间或超出 CSS 属性接受的范围，则使用默认值。开头和结尾的空格将被去除。

默认值：0s，或者，如果 0s 不是属性的有效值，则使用属性的最小值。

s、ms

属性值被解析为 CSS <number>，即不带单位（例如 12.5），并解释为具有指定单位的 <time>。如果无效，即不是数字或超出 CSS 属性接受的范围，则使用默认值。开头和结尾的空格将被去除。

默认值：0s，或者，如果 0s 不是属性的有效值，则使用属性的最小值。

频率

属性值被解析为 CSS <frequency> 尺寸，包括单位（例如 30.5kHz）。如果无效，即不是频率或超出 CSS 属性接受的范围，则使用默认值。

默认值：0Hz，或者，如果 0Hz 不是属性的有效值，则使用属性的最小值。

Hz、kHz

属性值被解析为 CSS <number>，即不带单位（例如 12.5），并解释为具有指定单位的 <frequency>。如果无效，即不是数字或超出 CSS 属性接受的范围，则使用默认值。开头和结尾的空格将被去除。

默认值：0Hz，或者，如果 0Hz 不是属性的有效值，则使用属性的最小值。

%

属性值被解析为 CSS <number>，即不带单位（例如 12.5），并解释为 <percentage>。如果无效，即不是数字或超出 CSS 属性接受的范围，则使用默认值。如果给定的值用作长度，attr() 会将其计算为绝对长度。开头和结尾的空格将被去除。

默认值：0%，或者，如果 0% 不是属性的有效值，则使用属性的最小值。

<fallback>

如果关联属性缺失或包含无效值，则使用此值。如果未设置，CSS 将使用为每个 <type-or-unit> 定义的默认值。

正式语法

<attr()> = 
  attr( <attr-name> <attr-type>? , <declaration-value>? )  

<attr-name> = 
  [ <ident-token> '|' ]? <ident-token>  

<attr-type> = 
  string            |
  ident             |
  color             |
  number            |
  percentage        |
  length            |
  angle             |
  time              |
  frequency         |
  flex              |
  <dimension-unit>

示例

内容属性

在此示例中，我们将 data-foo data-* 全局属性 的值添加到 <p> 元素的内容前面。

HTML

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

CSS

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

结果

颜色值

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表格。

在此示例中，我们将 background-color 的 CSS 值设置为分配给 <div> 元素的 data-background data-* 全局属性 的值。

HTML

html
<div class="background" data-background="lime">
  background expected to be red if your browser does not support advanced usage
  of attr()
</div>

CSS

css
.background {
  background-color: red;
}

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

结果

使用回退

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表格。

在此示例中，我们将 data-browser data-* 全局属性 的值附加到 <p> 元素。如果 <p> 元素缺少 data-browser 属性，我们将附加“未知”的回退值。

HTML

html
<p data-browser="Firefox">My favorite browser is:</p>
<p>Your favorite browser is:</p>

CSS

css
p::after {
  content: " " attr(data-browser, "Unknown");
  color: tomato;
}

结果

规范

规范
CSS 值和单位模块级别 5
# attr 表示法

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅