attr() 是一个 CSS 函数,用于获取 HTML 元素的属性值并将其应用于 CSS 样式中。在使用 attr() 函数时,它将返回元素属性的值,但它不会决定哪个样式应该是最终的样式。最终的样式将由 CSS 中定义的所有其他样式一起决定。
例如,在以下示例中,使用 attr() 函数获取 HTML 元素的属性并将其应用于 CSS 样式,但最终样式将受到其他样式的影响:
HTML 代码:
CSS 代码:
.box {
width: 100px;
height: 100px;
background-color: attr(data-color);
}
.box[data-color="red"] {
background-color: red;
}
.box[data-color="blue"] {
background-color: blue;
}
在上面的示例中,使用 attr() 函数获取元素的 data-color 属性并将其应用于 background-color 样式。但如果元素具有 data-color="red",那么最终的背景颜色将为红色,因为该元素匹配了具有更高特定性的样式(.box[data-color="red"])。如果将元素的 data-color 属性更改为 blue,那么最终的背景颜色将变成蓝色,因为 .box[data-color="blue"] 样式与该元素相匹配。