在css中为自定义数据属性分配优先级答案

【问题标题】：Assigning priority to custom data attributes in css在css中为自定义数据属性分配优先级
【发布时间】：2013-11-12 15:01:49
【问题描述】：

这似乎超级基本，但我正在尝试为包含自定义数据值的 HTML 元素创建 css 优先级。该值用于需要修改核心样式的罕见上下文。我无法成功地将 id 与数据选择器结合起来。这甚至可能吗？

关于如何使用<div id="x" data-value="y"> 创建优先于<div #id="x"> 的任何指导？

谢谢

【问题讨论】：

【解决方案1】：

您可以在 CSS 规则中使用属性的存在：

#x {
    /* default CSS here */
}

#x[data-value] {
    /* CSS for items with the attribute here */
}

参考here。

但是，如果这两个元素都存在于同一页面中，您可能会遇到问题，因为页面中应该只有一个具有给定 ID 的对象，因此您可能需要转而使用类而不是 id。

【讨论】：

拥有一个 ID 并不能保证一个元素具有或不具有该数据属性，即使它是页面中唯一的一个。
@BoltClock - OP 询问如何为具有自定义属性的元素覆盖 CSS 规则。这就是这个答案的作用。我不明白你认为是什么问题。
您说“但是，您遇到了问题，因为您应该只在页面中拥有一个具有给定 ID 的对象”，我的意思是这并不是真正的问题。
@BoltClock - 除了它是非法的 HTML 之外，你的意思是？我认为好的答案应该指出代码所具有的其他问题，这就是我所做的。您可以在我的演示中看到我是如何使用合法 HTML 的通用类名使其正常工作的。
是的，我并没有因此而责怪你。我只是指出，通过 ID 和属性来定位元素是合理且没有问题的，即使页面一次正确地将其分配给单个元素，因为该元素可能并不总是具有该属性该页面，并且OP想要考虑这两种情况。但我只是重读了这个问题，它说“HTML 元素”，所以据我们所知，OP 可能确实有多个具有相同 ID 的元素，这当然是非法的。