path: root/files/zh-cn/web/css/attr()/index.html

---
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 &lt;type-or-unit&gt;? [, &lt;fallback&gt; ]? )
</pre>

<h3 id="解释">解释</h3>

<dl>
 <dt><code>attribute-name</code></dt>
 <dd>是CSS所引用的HTML属性名称。</dd>
 <dt><code>&lt;type-or-unit&gt;</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("&lt;string&gt;")}}</td>
    <td>属性值将被解析为 {{cssxref("&lt;string&gt;")}}</td>
    <td>空字符串</td>
   </tr>
   <tr>
    <td><code>color</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;color&gt;")}}</td>
    <td>属性值将被解析为#xxx、#xxxxxx或关键字的形式，且必须为合法CSS {{cssxref("&lt;string&gt;")}} 值。<br>
     前缀与后缀空格将被截掉。</td>
    <td>当前颜色</td>
   </tr>
   <tr>
    <td><code>url</code> {{ experimental_inline() }}</td>
    <td>{{ cssxref("&lt;uri&gt;") }}</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("&lt;integer&gt;")}}</td>
    <td>属性值将被解析为CSS {{cssxref("&lt;integer&gt;")}}。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。<br>
     前缀与后缀空格将被截掉。</td>
    <td><code>0</code>，或该属性允许的最小值（如果0是不合法的值）。</td>
   </tr>
   <tr>
    <td><code>number</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;number&gt;")}}</td>
    <td>属性值将被解析为CSS {{cssxref("&lt;number&gt;")}}。 若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。<br>
     前缀与后缀空格将被截掉。</td>
    <td><code>0</code>，或该属性允许的最小值（如果0是不合法的值）。</td>
   </tr>
   <tr>
    <td><code>length</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;length&gt;")}}</td>
    <td>属性值将被解析为CSS {{cssxref("&lt;length&gt;")}}，带单位，比如 <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("&lt;length&gt;")}}</td>
    <td>
     <p>属性值将被解析为CSS {{cssxref("&lt;number&gt;")}}，不带单位，如 <code>12.5</code>，并被解释为带有所规定单位的 {{cssxref("&lt;length&gt;")}} 值。若不是合法值（不是长度值或超出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("&lt;angle&gt;") }}</td>
    <td>属性值将被解析为CSS {{ cssxref("&lt;angle&gt;") }}，带单位，如<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("&lt;angle&gt;") }}</td>
    <td>属性值将被解析为CSS {{cssxref("&lt;number&gt;")}}，不带单位，如<code>12.5</code>)，并被解释为带有所规定单位的 {{ cssxref("&lt;angle&gt;") }} 值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。<br>
     前缀与后缀空格将被截掉。</td>
    <td><code>0deg</code>，或该属性允许的最小值（如果0deg是不合法的值）。</td>
   </tr>
   <tr>
    <td><code>time</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;time&gt;")}}</td>
    <td>属性值将被解析为CSS {{cssxref("&lt;time&gt;")}}，带单位，如<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("&lt;time&gt;")}}</td>
    <td>属性值将被解析为CSS {{cssxref("&lt;time&gt;")}}，不带单位，如<code>30.5</code>，并被解释为带有所规定单位的 {{cssxref("&lt;time&gt;")}} 值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。<br>
     前缀与后缀空格将被截掉。</td>
    <td><code>0s</code>，或该属性允许的最小值（如果0s是不合法的值）。</td>
   </tr>
   <tr>
    <td><code>frequency</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;frequency&gt;")}}</td>
    <td>属性值将被解析为CSS {{cssxref("&lt;frequency&gt;")}}，带单位，如<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("&lt;frequency&gt;")}}</td>
    <td>属性值将被解析为CSS {{cssxref("&lt;frequency&gt;")}}，不带单位，如<code>12.5</code>)，并被解释为带有所规定单位的{{cssxref("&lt;frequency&gt;")}}值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。<br>
     前缀与后缀空格将被截掉。</td>
    <td><code>0Hz</code>，或该属性允许的最小值（如果0Hz是不合法的值）。</td>
   </tr>
   <tr>
    <td><code>%</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;percentage&gt;")}}</td>
    <td>属性值将被解析为CSS {{cssxref("&lt;number&gt;")}}，不带单位，如<code>12.5</code>)，并被解释为带有所规定单位的 {{cssxref("&lt;percentage&gt;")}}值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。<br>
     若属性值用作长度，<code>attr()</code>将其计算为绝对长度。<br>
     前缀与后缀空格将被截掉。</td>
    <td><code>0%</code>，或该属性允许的最小值（如果0%是不合法的值）。</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><code>&lt;fallback&gt;</code></dt>
 <dd>如果HTML元素缺少所规定的属性值或属性值不合法，则使用<code>fallback</code>值。该值必须合法，且不能包含另一个<code>attr()</code>表达式。如果<code>attr()</code>不是所在CSS属性值的唯一值，其<code>&lt;fallback&gt;</code>值必须为<code>&lt;type-or-unit&gt;</code>所指定的类型，否则CSS会使用相应<code>&lt;type-or-unit&gt;</code>定义的默认值（见上表）。</dd>
</dl>

<h2 id="示例">示例</h2>

<pre class="brush: css notranslate">p:before {
    content:attr(data-foo) " ";
}
</pre>

<pre class="brush: html notranslate">&lt;p data-foo="hello"&gt;world&lt;/p&gt;
</pre>

<h3 id="结果">结果</h3>

<p>hello world</p>



<h3 id="示例1">示例1</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate"><code>&lt;p data-foo="hello"&gt;world&lt;/p&gt;</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>&lt;div class="background" data-background="lime"&gt;颜色应该是红色而不是绿色因为浏览器并不支持attr()的高级用法&lt;/div&gt;</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("&lt;string&gt;")}}.</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("&lt;string&gt;")}}.</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("&lt;string&gt;")}}之外的其他类型。这些改变是实验性质的{{ experimental_inline() }}，且如果浏览器支持不足，可能在CR阶段被丢弃。</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>限制用在 {{ cssxref("content") }} 属性；且必须返回{{cssxref("&lt;string&gt;")}}}。</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div class="hidden">
<p><span style="">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out </span><a href="https://github.com/mdn/browser-compat-data" style="">https://github.com/mdn/browser-compat-data</a><span style="">and send us a pull request.</span></p>
</div>



<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>