---
title: attr
slug: Web/CSS/attr()
tags:
- CSS
- CSS Function
- attr Function
translation_of: Web/CSS/attr()
---
<dl>
<dt>{{ CSSRef() }}</dt>
</dl>
<h2 id="概述">概述</h2>
<div class="blockIndicator note">
<p><strong>注意:</strong> <code>attr()</code> 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 {{CSSxRef("content")}} 属性，其他的属性和高级特性目前是实验性的</p>
<p>译者注：如果发现浏览器兼容表里attr()的高级用法依旧没有良好的支持的话，本文大部分内容都是纸上谈兵</p>
</div>
<p>CSS表达式 <code>attr()</code> 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。</p>
<p><code>attr()</code> 表达式可以用于任何CSS属性。 {{ experimental_inline() }}</p>
<h2 id="用法">用法</h2>
<pre class="syntaxbox notranslate">语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
</pre>
<h3 id="解释">解释</h3>
<dl>
<dt><code>attribute-name</code></dt>
<dd>是CSS所引用的HTML属性名称。</dd>
<dt><code><type-or-unit></code></dt>
<dd>表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么<code>attr()</code>表达式也不合法。若省略，则默认值为<code>string</code>。其合法值包括：
<table class="standard-table">
<thead>
<tr>
<th scope="col">关键字</th>
<th scope="col">类型</th>
<th scope="col">备注</th>
<th scope="col">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>string</code></td>
<td>{{cssxref("<string>")}}</td>
<td>属性值将被解析为 {{cssxref("<string>")}}</td>
<td>空字符串</td>
</tr>
<tr>
<td><code>color</code> {{ experimental_inline() }}</td>
<td>{{cssxref("<color>")}}</td>
<td>属性值将被解析为#xxx、#xxxxxx或关键字的形式，且必须为合法CSS {{cssxref("<string>")}} 值。<br>
前缀与后缀空格将被截掉。</td>
<td>当前颜色</td>
</tr>
<tr>
<td><code>url</code> {{ experimental_inline() }}</td>
<td>{{ cssxref("<uri>") }}</td>
<td>属性值将被解析为可用于<code>url()</code>函数的字符串。<br>
相对URL是根据HTML文档的路径解析，而不是样式文件所在的路径。<br>
前缀与后缀空格将被截掉。</td>
<td>URL <code>about:invalid</code>，表示资源不存在。</td>
</tr>
<tr>
<td><code>integer</code> {{ experimental_inline() }}</td>
<td>{{cssxref("<integer>")}}</td>
<td>属性值将被解析为CSS {{cssxref("<integer>")}}。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。<br>
前缀与后缀空格将被截掉。</td>
<td><code>0</code>，或该属性允许的最小值（如果0是不合法的值）。</td>
</tr>
<tr>
<td><code>number</code> {{ experimental_inline() }}</td>
<td>{{cssxref("<number>")}}</td>
<td>属性值将被解析为CSS {{cssxref("<number>")}}。 若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。<br>
前缀与后缀空格将被截掉。</td>
<td><code>0</code>，或该属性允许的最小值（如果0是不合法的值）。</td>
</tr>
<tr>
<td><code>length</code> {{ experimental_inline() }}</td>
<td>{{cssxref("<length>")}}</td>
<td>属性值将被解析为CSS {{cssxref("<length>")}}，带单位，比如 <code>12.5em</code>。 若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。<br>
若属性值是一个相对长度， <code>attr()</code>会将其计算为绝对长度。<br>
前缀与后缀空格将被截掉。</td>
<td><code>0</code>，或该属性允许的最小值（如果0是不合法的值）。</td>
</tr>
<tr>
<td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{ experimental_inline() }}</td>
<td>{{cssxref("<length>")}}</td>
<td>
<p>属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如 <code>12.5</code>，并被解释为带有所规定单位的 {{cssxref("<length>")}} 值。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。<br>
若属性值是一个相对长度， <code>attr()</code>会将其计算为绝对长度。<br>
前缀与后缀空格将被截掉。</p>
</td>
<td><code>0</code>，或该属性允许的最小值（如果0是不合法的值）。</td>
</tr>
<tr>
<td><code>angle</code> {{ experimental_inline() }}</td>
<td>{{ cssxref("<angle>") }}</td>
<td>属性值将被解析为CSS {{ cssxref("<angle>") }}，带单位，如<code>30.5deg</code>。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。<br>
前缀与后缀空格将被截掉。</td>
<td><code>0deg</code>，或该属性允许的最小值（如果0deg是不合法的值）。</td>
</tr>
<tr>
<td><code>deg</code>, <code>grad</code>, <code>rad</code> {{ experimental_inline() }}</td>
<td>{{ cssxref("<angle>") }}</td>
<td>属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如<code>12.5</code>)，并被解释为带有所规定单位的 {{ cssxref("<angle>") }} 值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。<br>
前缀与后缀空格将被截掉。</td>
<td><code>0deg</code>，或该属性允许的最小值（如果0deg是不合法的值）。</td>
</tr>
<tr>
<td><code>time</code> {{ experimental_inline() }}</td>
<td>{{cssxref("<time>")}}</td>
<td>属性值将被解析为CSS {{cssxref("<time>")}}，带单位，如<code>30.5ms</code>。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。<br>
前缀与后缀空格将被截掉。</td>
<td><code>0s</code>，或该属性允许的最小值（如果0s是不合法的值）。</td>
</tr>
<tr>
<td><code>s</code>, <code>ms</code> {{ experimental_inline() }}</td>
<td>{{cssxref("<time>")}}</td>
<td>属性值将被解析为CSS {{cssxref("<time>")}}，不带单位，如<code>30.5</code>，并被解释为带有所规定单位的 {{cssxref("<time>")}} 值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。<br>
前缀与后缀空格将被截掉。</td>
<td><code>0s</code>，或该属性允许的最小值（如果0s是不合法的值）。</td>
</tr>
<tr>
<td><code>frequency</code> {{ experimental_inline() }}</td>
<td>{{cssxref("<frequency>")}}</td>
<td>属性值将被解析为CSS {{cssxref("<frequency>")}}，带单位，如<code>12.5kHz</code>)。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。<br>
前缀与后缀空格将被截掉。</td>
<td><code>0Hz</code>，或该属性允许的最小值（如果0Hz是不合法的值）。</td>
</tr>
<tr>
<td><code>Hz</code>, <code>kHz</code> {{ experimental_inline() }}</td>
<td>{{cssxref("<frequency>")}}</td>
<td>属性值将被解析为CSS {{cssxref("<frequency>")}}，不带单位，如<code>12.5</code>)，并被解释为带有所规定单位的{{cssxref("<frequency>")}}值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。<br>
前缀与后缀空格将被截掉。</td>
<td><code>0Hz</code>，或该属性允许的最小值（如果0Hz是不合法的值）。</td>
</tr>
<tr>
<td><code>%</code> {{ experimental_inline() }}</td>
<td>{{cssxref("<percentage>")}}</td>
<td>属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如<code>12.5</code>)，并被解释为带有所规定单位的 {{cssxref("<percentage>")}}值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。<br>
若属性值用作长度，<code>attr()</code>将其计算为绝对长度。<br>
前缀与后缀空格将被截掉。</td>
<td><code>0%</code>，或该属性允许的最小值（如果0%是不合法的值）。</td>
</tr>
</tbody>
</table>
</dd>
<dt><code><fallback></code></dt>
<dd>如果HTML元素缺少所规定的属性值或属性值不合法，则使用<code>fallback</code>值。该值必须合法，且不能包含另一个<code>attr()</code>表达式。如果<code>attr()</code>不是所在CSS属性值的唯一值，其<code><fallback></code>值必须为<code><type-or-unit></code>所指定的类型，否则CSS会使用相应<code><type-or-unit></code>定义的默认值（见上表）。</dd>
</dl>
<h2 id="示例">示例</h2>
<pre class="brush: css notranslate">p:before {
content:attr(data-foo) " ";
}
</pre>
<pre class="brush: html notranslate"><p data-foo="hello">world</p>
</pre>
<h3 id="结果">结果</h3>
<p>hello world</p>
<h3 id="示例1">示例1</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><code><p data-foo="hello">world</p></code></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate"><code>[data-foo]::before {
content: attr(data-foo) " ";
}</code></pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("示例1", "100%", 50)}}</p>
<h3 id="示例2">示例2</h3>
<p>{{SeeCompatTable}}</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><code><div class="background" data-background="lime">颜色应该是红色而不是绿色因为浏览器并不支持attr()的高级用法</div></code></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate"><code>.background {
height: 100vh;
}</code></pre>
<pre class="brush: css notranslate"><code>.background {
background-color: red;
}
.background[data-background] {
background-color: attr(data-background color, red);
}</code></pre>
<p>{{EmbedLiveSample("示例2", "100%", 50)}}</p>
<h2 id="Specifications" name="Specifications">规范</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>No changes.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}</td>
<td>{{Spec2("CSS3 Values")}}</td>
<td>
<p>Added two optional parameters;<br>
can be used on all properties;<br>
may return values other than {{CSSxRef("<string>")}}.</p>
These changes are experimental and may be dropped during the CR phase if browser support is too small.</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Limited to the {{CSSxRef("content")}} property;<br>
always returns a {{CSSxRef("<string>")}}.</td>
</tr>
</tbody>
</table>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}</td>
<td>{{Spec2("CSS4 Values")}}</td>
<td>无变化</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Values', '#attr', 'attr()') }}</td>
<td>{{ Spec2('CSS3 Values') }}</td>
<td>增加两个可选参数；且可以用于所有属性；且可以返回除{{cssxref("<string>")}}之外的其他类型。这些改变是实验性质的{{ experimental_inline() }}，且如果浏览器支持不足，可能在CR阶段被丢弃。</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>限制用在 {{ cssxref("content") }} 属性；且必须返回{{cssxref("<string>")}}}。</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.types.attr")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a></p>
</li>
<li>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*">HTML <code>data-*</code> attributes</a></p>
</li>
<li>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data-*">SVG <code>data-*</code> attributes</a></p>
</li>
</ul>