如何在css中分配数据属性？答案

【问题标题】：How to assign data attribute in css?如何在css中分配数据属性？
【发布时间】：2014-08-21 03:20:00
【问题描述】：

我有以下 CSS：

.map-menu .category.selected {
    background-image: url("../img/category-selected.png");
}

但我想将其分配给 data 属性中包含的元素。我可以为数据元素分配这样的 CSS 元素，

[data-id='1]   {
    width: 400px;
}

.. 我只是不知道我需要做什么才能将它分配给 css 中的类别。我认为通过这样放置它会起作用，但无法正确分配：

.map-menu .category.selected  [data-id='1']  {
    background-image: url("../img/category-selected1.png");
}

有人可以引导我朝着正确的方向前进吗？我之前没有研究过数据属性。

这是一个用于它的 HTML 示例：

<div class="category selected" data-id="1">Art Galleries</div>

更新：想通了，你只需要真正指定你想要这样的样式：

div.selected[data-id='5']   {
 background-image: url("../img/category-selected.png") !important;
}

【问题讨论】：

如语法高亮所示，您缺少一个结束引号：[data-id='1']。 Example.
哦，那是因为 stackoverflow 的内容格式不正确。现在调整好了。
能否包含完整的示例 css 和 html
嗯，我觉得这已经在上面的CSS代码中完成了，但是这是html的html，适用于选择某些内容，图像更改上方 ^...只是想在数据中添加“类别”， id css，以便我可以将其分配给元素。
我想通了，反映在上面的帖子中。

【解决方案1】：

以下 CSS 有效，JSFiddle 上提供了完整示例：

[data-id]{color: red;}
[data-id="1"]{color: blue;}

【讨论】：

【解决方案2】：

更新：想通了，你只需要真正指定你想要这样的样式：

div.selected[data-id='5']   {
background-image: url("../img/category-selected.png") !important;
}

【讨论】：