diff options
Diffstat (limited to 'files/zh-cn/web/css/attr()/index.html')
| -rw-r--r-- | files/zh-cn/web/css/attr()/index.html | 309 |
1 files changed, 309 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/attr()/index.html b/files/zh-cn/web/css/attr()/index.html new file mode 100644 index 0000000000..02238efaa8 --- /dev/null +++ b/files/zh-cn/web/css/attr()/index.html @@ -0,0 +1,309 @@ +--- +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> + +<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> |