Question

可以让css使用content属性中的属性值（例如，在工具提示中有用）：

＆＃13;

span:hover:after {
  content:attr(tip);
}

＆＃13;

<span tip=" and behold my glory">Hover on me</span>

＆＃13;

我试图用它来绝对定位元素。我的想法是，在我的html中，我将不同的x，y位置指定为数据属性，css使用媒体查询选择适当的属性，例如：

＆＃13;

div {
  width:100px;
  height:100px;
  background:red;
  position:relative;
}

span {
  display:block;
  width:20px;
  height:20px;
  background:blue;
  position:absolute;
  /* SMall screen - show in top corner */
  top: attr(data-sm-x);
  left: attr(data-sm-y);
}
@media (min-width: 768px) {
  span {
    /* MeDium screen - show in middle of parent */
    top: attr(data-md-x);
    left: attr(data-md-y);
  }
}

＆＃13;

<div>
  <span data-sm-x="10" data-sm-y="10" data-md-x="50" data-md-y="50"></span>
</div>

＆＃13;

预期的结果是在小屏幕上的顶角有蓝色方块，在较大屏幕上有红色方块的中间，但这不起作用。

如何让attr函数处理非内容属性？

Answer 1

在内容以外的其他属性中使用是实验性的：https://developer.mozilla.org/en/docs/Web/CSS/attr

不在`content`属性

1 个答案: