From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/attr()/index.html | 309 ++++++++++++++++++++++++++++++++++ 1 file changed, 309 insertions(+) create mode 100644 files/zh-cn/web/css/attr()/index.html (limited to 'files/zh-cn/web/css/attr()') 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() +--- +
+
{{ CSSRef() }}
+
+ +

概述

+ +
+

注意:  attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 {{CSSxRef("content")}} 属性，其他的属性和高级特性目前是实验性的

+ +

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

+
+ +

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

+ +

attr() 表达式可以用于任何CSS属性。 {{ experimental_inline() }}

+ +

用法

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

解释

+ +
+
attribute-name
+
是CSS所引用的HTML属性名称。
+
<type-or-unit>
+
表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string。其合法值包括： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
关键字类型备注默认值
string{{cssxref("<string>")}}属性值将被解析为 {{cssxref("<string>")}}空字符串
color {{ experimental_inline() }}{{cssxref("<color>")}}属性值将被解析为#xxx、#xxxxxx或关键字的形式，且必须为合法CSS {{cssxref("<string>")}} 值。
+ 前缀与后缀空格将被截掉。		当前颜色
url {{ experimental_inline() }}{{ cssxref("<uri>") }}属性值将被解析为可用于url()函数的字符串。
+ 相对URL是根据HTML文档的路径解析，而不是样式文件所在的路径。
+ 前缀与后缀空格将被截掉。		URL about:invalid，表示资源不存在。
integer {{ experimental_inline() }}{{cssxref("<integer>")}}属性值将被解析为CSS {{cssxref("<integer>")}}。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
number {{ experimental_inline() }}{{cssxref("<number>")}}属性值将被解析为CSS {{cssxref("<number>")}}。 若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
length {{ experimental_inline() }}{{cssxref("<length>")}}属性值将被解析为CSS {{cssxref("<length>")}}，带单位，比如 12.5em。 若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
+ 若属性值是一个相对长度， attr()会将其计算为绝对长度。
+ 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{ experimental_inline() }}{{cssxref("<length>")}} +

属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如 12.5，并被解释为带有所规定单位的 {{cssxref("<length>")}} 值。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
+ 若属性值是一个相对长度， attr()会将其计算为绝对长度。
+ 前缀与后缀空格将被截掉。

+ 		0，或该属性允许的最小值（如果0是不合法的值）。
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{ cssxref("<angle>") }}，带单位，如30.5deg。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{ cssxref("<angle>") }} 值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
time {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，带单位，如30.5ms。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0s，或该属性允许的最小值（如果0s是不合法的值）。
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，不带单位，如30.5，并被解释为带有所规定单位的 {{cssxref("<time>")}} 值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0s，或该属性允许的最小值（如果0s是不合法的值）。
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，带单位，如12.5kHz)。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，不带单位，如12.5)，并被解释为带有所规定单位的{{cssxref("<frequency>")}}值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
% {{ experimental_inline() }}{{cssxref("<percentage>")}}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{cssxref("<percentage>")}}值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。
+ 若属性值用作长度，attr()将其计算为绝对长度。
+ 前缀与后缀空格将被截掉。		0%，或该属性允许的最小值（如果0%是不合法的值）。
+
+
<fallback>
+
如果HTML元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。如果attr()不是所在CSS属性值的唯一值，其<fallback>值必须为<type-or-unit>所指定的类型，否则CSS会使用相应<type-or-unit>定义的默认值（见上表）。
+
+ +

示例

+ +
p:before {
+    content:attr(data-foo) " ";
+}
+
+ +
<p data-foo="hello">world</p>
+
+ +

结果

+ +

hello world

+ + + +

示例1

+ +

HTML

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

CSS

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

Result

+ +

{{EmbedLiveSample("示例1", "100%", 50)}}

+ + + +

示例2

+ +

{{SeeCompatTable}}

+ +

HTML

+ +
<div class="background" data-background="lime">颜色应该是红色而不是绿色因为浏览器并不支持attr()的高级用法</div>
+ +

CSS

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

{{EmbedLiveSample("示例2", "100%", 50)}}

+ + + + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
No changes.
{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}{{Spec2("CSS3 Values")}} +

Added two optional parameters;
+ can be used on all properties;
+ may return values other than {{CSSxRef("<string>")}}.

+ These changes are experimental and may be dropped during the CR phase if browser support is too small.
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}Limited to the {{CSSxRef("content")}} property;
+ always returns a {{CSSxRef("<string>")}}.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}无变化
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}增加两个可选参数；且可以用于所有属性；且可以返回除{{cssxref("<string>")}}之外的其他类型。这些改变是实验性质的{{ experimental_inline() }}，且如果浏览器支持不足，可能在CR阶段被丢弃。
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}限制用在 {{ cssxref("content") }} 属性；且必须返回{{cssxref("<string>")}}}。
+ +

浏览器兼容性

+ + + + + +

{{Compat("css.types.attr")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf