attr
====

概述
--

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

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

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

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

用法
--
```

语法：attr( attribute-name <type-or-unit>? [, <fallback> ]? )
```

### 解释

`attribute-name`

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

`<type-or-unit>`

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

| 关键字 | 类型 | 备注 | 默认值 |
| --- | --- | --- | --- |
| `string` | `<string>` | 属性值将被解析为 `<string>` | 空字符串 |
| `color` 
实验性
 | `<color>` | 属性值将被解析为#xxx、#xxxxxx 或关键字的形式，且必须为合法 CSS `<string>` 值。前缀与后缀空格将被截掉。 | 当前颜色 |
| `url` 
实验性
 | `<uri>()` (en-US) | 属性值将被解析为可用于`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 with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Attribute selectors
* HTML `data-*` attributes
* SVG `data-*` attributes (en-US)