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"] 样式与该元素相匹配。