使用 CSS 中的数据属性

我们之前研究过在 JavaScript 中使用数据属性。这些数据属性是一种非常好的方法，可以在不使用自定义属性的情况下在元素上存储少量信息。

但是，我们也可以使用它们来设置具有特定属性集的某些方面的样式。

CSS 中的 CSS 属性

为了绘制一个简单的图像，让我们创建具有特定值的元素，如下所示。

<div data-rating="1">Rating</div>
<div data-rating="5">Rating</div>

如您所见，我们的评级仅设置为自定义属性。

让我们首先看看如何设置该对象的样式，这很容易，只需使用它的名称即可。

[data-rating] {
  color: indigo;
}

这样，评级文本将变成紫色。

我们还可以使其更加具体并为特定值添加样式。

[data-rating='1'] {
  color: red;
}
[data-rating='5'] {
  color: indigo;
}

最重要的是，我们可以使用 CSS 注入值！

[data-rating]::after {
  content: attr(data-rating);
}

这将导致评级被添加到我们的文本之后。

您可以在以下 CodePen 上使用这些数据属性。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。